/* ==========================================================================
   SAMRAT: THRONE OF POWER — Game Landing Page
   Pixel-accurate recreation built with semantic HTML5 + vanilla CSS3
   ========================================================================== */

/* ==========================================================================
   1. FONT IMPORTS
   Display:  'Cinzel Decorative' — ornate, carved-stone feel for the wordmark
   Headings: 'Cinzel'            — classical Roman capitals, regal/epic tone
   Body:     'EB Garamond'       — old-style serif, readable at small sizes
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ==========================================================================
   2. ROOT VARIABLES
   ========================================================================== */
:root {
  /* ---- Color: Primary / Brand ---- */
  --color-gold: #d4af37;
  --color-gold-bright: #f2d675;
  --color-gold-deep: #9c7a1f;
  --color-gold-line: #a5822a;

  /* ---- Color: Secondary / Accent ---- */
  --color-crimson: #7a1620;
  --color-crimson-bright: #9c2430;
  --color-crimson-dark: #4a0d14;

  /* ---- Color: Background / Surface ---- */
  --color-void: #080706;
  --color-void-soft: #100d0a;
  --color-panel: #17130e;
  --color-panel-alt: #1f1912;
  --color-parchment: #e8d9b5;
  --color-parchment-dark: #d9c48f;
  --color-parchment-shadow: #b39d63;

  /* ---- Color: Text ---- */
  --color-text-light: #f4eddc;
  --color-text-muted: #bdb09a;
  --color-text-faint: #8a7d68;
  --color-text-dark: #2a2013;
  --color-text-dark-muted: #55492f;

  /* ---- Color: Border ---- */
  --color-border-gold: #a5822a;
  --color-border-gold-soft: rgba(212, 175, 55, 0.35);
  --color-border-dark: #2c2418;

  /* ---- Shadow colors ---- */
  --shadow-gold-glow: rgba(212, 175, 55, 0.35);
  --shadow-crimson-glow: rgba(122, 22, 32, 0.55);
  --shadow-deep: rgba(0, 0, 0, 0.65);

  /* ---- Gradients ---- */
  --gradient-crimson-btn: linear-gradient(180deg, #9c2430 0%, #6e131c 100%);
  --gradient-gold-text: linear-gradient(
    180deg,
    #f6e5a3 0%,
    #d4af37 45%,
    #9c7a1f 100%
  );
  --gradient-parchment: linear-gradient(180deg, #f0e2bd 0%, #d9c48f 100%);
  --gradient-hero-overlay: linear-gradient(
    180deg,
    rgba(8, 7, 6, 0.15) 0%,
    rgba(8, 7, 6, 0.55) 70%,
    rgba(8, 7, 6, 0.95) 100%
  );
  --gradient-panel-fade: linear-gradient(
    180deg,
    var(--color-void) 0%,
    var(--color-void-soft) 100%
  );

  /* ---- Spacing scale (8px system) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ---- Border radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Shadows ---- */
  --shadow-card: 0 8px 24px var(--shadow-deep);
  --shadow-btn: 0 4px 14px var(--shadow-crimson-glow);
  --shadow-glow-gold: 0 0 24px var(--shadow-gold-glow);

  /* ---- Typography scale ---- */
  --font-display: "Cinzel Decorative", serif;
  --font-heading: "Cinzel", serif;
  --font-body: "EB Garamond", serif;

  --fs-hero-title: clamp(2.6rem, 6vw, 4.6rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.2rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-nav: 0.95rem;

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-loose: 1.85;

  --container-max: 1280px;
}

/* ==========================================================================
   3. RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-void);
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
input {
  font: inherit;
}

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-crimson);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.section-title--light {
  color: var(--color-gold-bright);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
}

.section-sub-title {
  color: var(--color-text-light);
  font-size: var(--fs-h3);
  text-align: center;
}

/* ==========================================================================
   5. LAYOUT / UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   6. COMPONENTS — HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgb(0 0 0 / 24%);
  backdrop-filter: blur(4px);
}

.header-inner {
  max-width: 1320px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}

.logo img {
  width: 130px;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 42px;
}

.main-nav a {
  text-decoration: none;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.3s;
  position: relative;
}

.main-nav a.active {
  color: #d7a83d;
}

.main-nav a:hover {
  color: #d7a83d;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon {
  position: relative;

  color: #d7a83d;

  font-size: 22px;

  text-decoration: none;
}

.icon img {
  width: 24px;
  display: block;
}

.dot {
  width: 8px;
  height: 8px;

  background: red;

  border-radius: 50%;

  position: absolute;

  top: 0;
  right: -2px;
}

.menu-toggle {
  display: none;

  background: none;
  border: none;

  color: #fff;

  font-size: 30px;

  cursor: pointer;
}

/* ==========================================================================
   7. COMPONENTS — HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;

  background: url("./assets/img/hero-section-image.png") no-repeat center top;
  background-size: cover;

  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 35%,
    rgba(0, 0, 0, 0.08) 70%,
    transparent 100%
  );

  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1320px;

  margin: 0 auto;

  display: flex;
  align-items: center;

  padding: 140px 20px 70px;
}

.hero-content {
  width: 100%;
  max-width: 520px;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.82);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero-title);
  line-height: 1.02;
  letter-spacing: 0.03em;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.hero-title span {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.4em;
  letter-spacing: 0.35em;
  margin-top: var(--space-2);
}

.hero-tagline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--color-text-light);
  margin-top: var(--space-5);
  line-height: 1.3;
}

.hero-desc {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-body-lg);
  max-width: 440px;
}

/* .hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
} */

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 35px;
  max-width: 760px;
}

.action-item {
  width: 100%;
}

.download-btn {
  display: block;
  width: 100%;
}

.download-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.btn-outline {
  width: 100%;
  /* height: 88px; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.store-badges {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.store-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* border: 1px solid var(--color-text-faint); */
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-light);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.store-badge:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.store-badge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.store-badge .store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.store-badge .store-text small {
  font-size: 0.65rem;
  color: var(--color-text-faint);
}

.hero-art {
  position: relative;
  height: 100%;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Placeholder for hero character key-art */
.hero-art-placeholder {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent 30%),
    repeating-linear-gradient(135deg, #221a10 0 2px, #1a140c 2px 40px);
  border: 1px dashed var(--color-border-gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-faint);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  padding: var(--space-4);
}

/* ==========================================================================
   8. COMPONENTS — BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-nav);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.btn-primary {
  background: var(--gradient-crimson-btn);
  color: var(--color-gold-bright);
  border: 1px solid var(--color-gold-deep);
  box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px var(--shadow-crimson-glow);
}

.btn-outline {
  background: transparent;
  color: var(--color-text-light);
  border: 1px solid var(--color-text-light);
}

.btn-outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
  transform: translateY(-3px);
}

.btn-outline .play-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}

/* ==========================================================================
   9. COMPONENTS — FEATURES (scroll banner)
   ========================================================================== */
.features {
  position: relative;
  padding-block: var(--space-8) var(--space-7);
  /* background: var(--gradient-panel-fade); */
  background-position: center;
  background-repeat: no-repeat;
}

.scroll-panel {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
  /* background: var(--gradient-parchment); */
  /* border-radius: var(--radius-md); */
  /* padding: var(--space-7) var(--space-6) var(--space-6); */
  /* box-shadow: var(--shadow-card), inset 0 0 40px rgba(120, 95, 40, 0.25); */
}

.scroll-panel::before,
.scroll-panel::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  height: 34px;
  /* background: linear-gradient(180deg, #b99a55, #8a6d34); */
  /* background-image: url(./assets/img/game-features-scroll-image.png); */
  /* border-radius: 20px; */
  /* box-shadow: var(--shadow-card); */
}

.scroll-panel::before {
  top: -17px;
}
.scroll-panel::after {
  bottom: -17px;
}

.features .section-title {
  margin-bottom: var(--space-5);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.feature-card {
  background: linear-gradient(180deg, #17130e, #0d0a07);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-glow-gold);
}

.feature-icon {
  width: 48px;
  height: 48px;
  margin-inline: auto var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-gold);
}

.feature-card h3 {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--color-gold-bright);
  margin-bottom: var(--space-2);
}

.feature-card p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   10. COMPONENTS — STORY SECTION
   ========================================================================== */
.story-section {
  padding-block: var(--space-7);
  background: var(--color-void);
}

.story-section > .eyebrow-wrap {
  text-align: center;
  margin-bottom: var(--space-6);
}

.story-frame {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  border: 2px solid var(--color-border-gold);
  padding: var(--space-7) var(--space-6);
  background:
    radial-gradient(
      ellipse at 15% 15%,
      rgba(122, 22, 32, 0.18),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 85% 85%,
      rgba(122, 22, 32, 0.18),
      transparent 45%
    ),
    var(--color-panel);
}

/* ornate corner flourishes */
.story-frame::before,
.story-frame::after,
.story-frame .corner-br,
.story-frame .corner-bl {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid var(--color-gold);
}

.story-frame::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}
.story-frame::after {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}
.story-frame .corner-bl {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
}
.story-frame .corner-br {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

.story-heading {
  text-align: center;
  margin-bottom: var(--space-6);
}

.story-crown {
  color: var(--color-gold);
  width: 32px;
  height: 32px;
  margin-inline: auto var(--space-2);
  margin-bottom: var(--space-2);
}

.story-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: 0.08em;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-body {
  /* max-width: 880px; */
  max-width: 440px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: var(--lh-loose);
  color: var(--color-text-light);
  text-transform: uppercase;
}

.story-body p {
  margin-block: var(--space-5);
}
.story-body .highlight {
  color: var(--color-gold-bright);
}
.story-divider {
  width: 90px;
  margin: var(--space-5) auto;
  color: var(--color-gold);
  text-align: center;
}

.story-samrat {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--color-gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.king-ba {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d4af37;
  font-size: 60px;
  font-weight: 700;
}

.king-ba::before,
.king-ba::after {
  content: "";
  display: inline-block;

  width: 60px;
  height: 50px;

  background: url("./assets/icons/crown-icon.png") no-repeat center;
  background-size: contain;

  flex-shrink: 0;
}

.common-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-crimson);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.common-title--light {
  color: var(--color-gold-bright);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
}

.kingdom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.kingdom-card {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #221a10, #0d0a07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  position: relative;
  overflow: hidden;
}

.kingdom-card svg {
  width: 40%;
  height: 40%;
  opacity: 0.85;
}

.story-footer-logo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.story-footer-logo .logo-main {
  font-size: 1.6rem;
}

/* ==========================================================================
   11. COMPONENTS — WALLPAPER GALLERY
   ========================================================================== */
.wallpaper-section {
  padding-block: var(--space-4);
  background: var(--color-void);
  text-align: center;
}

.wallpaper-section .section-title {
  margin-bottom: var(--space-6);
}

.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--container-max);
  margin-inline: auto;
}

.wallpaper-thumb {
  /* aspect-ratio: 4 / 3; */
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-gold-soft);
  background: linear-gradient(150deg, #241b10, #100c08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}

.wallpaper-thumb:hover {
  transform: scale(1.03);
}

/* ==========================================================================
   12. COMPONENTS — CTA / DOWNLOAD BANNER
   ========================================================================== */
.cta-banner {
  position: relative;
  margin: var(--space-7) auto;
  max-width: 1300px;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 1px solid var(--color-border-gold);
  background:
    linear-gradient(180deg, rgba(8, 7, 6, 0.55), rgba(8, 7, 6, 0.85)),
    radial-gradient(
      ellipse at 10% 50%,
      rgba(122, 22, 32, 0.35),
      transparent 50%
    ),
    radial-gradient(
      ellipse at 90% 50%,
      rgba(122, 22, 32, 0.35),
      transparent 50%
    ),
    linear-gradient(120deg, #1c140c, #0e0a06);
}

.cta-crown {
  width: 34px;
  height: 34px;
  color: var(--color-gold);
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  letter-spacing: 0.06em;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.25;
}

.cta-banner .btn-primary {
  margin-top: var(--space-5);
  padding-inline: var(--space-7);
}

.cta-note {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.cta-banner .store-badges {
  justify-content: center;
  margin-top: var(--space-3);
}

/* ==========================================================================
   13. COMPONENTS — FOOTER
   ========================================================================== */
.footer-bg {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;

  background: url("./assets/img/footer-bg.png") no-repeat center top;
  background-size: cover;

  overflow: hidden;
}

.site-footer {
  background: var(--color-void-soft);
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--space-7) var(--space-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.footer-brand p {
  margin-top: var(--space-3);
  color: var(--color-text-light);
  font-size: var(--fs-h3);
  max-width: 280px;
  line-height: var(--lh-normal);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-3);
}

.footer-links li {
  margin-bottom: var(--space-2);
}
.footer-links a {
  color: var(--color-text-light);
  font-size: var(--fs-h3);
  transition: color 0.25s ease;
}
.footer-links a:hover {
  color: var(--color-gold-bright);
}

.footer-phones {
  display: flex;
  gap: var(--space-3);
}

.phone-mock {
  width: 90px;
  height: 160px;
  border-radius: 12px;
  border: 1px solid var(--color-border-gold-soft);
  background: linear-gradient(160deg, #221a10, #0d0a07);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gold);
}

.social-link-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.social-links {
  display: flex;
  gap: var(--space-3);
}

.social-links a {
  width: 50px;
  height: 36px;
  border-radius: 50%;
  /* border: 1px solid var(--color-border-gold-soft); */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.social-links a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
}

.social-links svg {
  width: 16px;
  height: 16px;
}

.copyright {
  font-size: var(--fs-h3);
  color: var(--color-text-light);
  text-align: right;
}

.footer-download-btn {
  margin-top: var(--space-4);
}

.footer-description {
  position: relative;
  max-width: 420px;
  margin: 60px auto;
  padding: 35px 0;
  text-align: center;
  color: #cfcfcf;
  line-height: 1.8;
}

/* Top line */
.footer-description::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 18px;
  background: url("./assets/img/line.png") center center no-repeat;
  background-size: contain;
}

/* Bottom line */
.footer-description::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 18px;
  background: url("./assets/img/line.png") center center no-repeat;
  background-size: contain;
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content {
    max-width: 100%;
    margin-inline: auto;
  }
  .hero-desc {
    margin-inline: auto;
  }
  .hero-actions,
  .store-badges {
    justify-content: center;
  }
  .hero-art {
    min-height: 340px;
    order: -1;
  }
  .hero-art-placeholder {
    min-height: 340px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kingdom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wallpaper-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-3);
  }

  .main-nav {
    display: none;
  }
  .nav-toggle {
    display: block;
  }

  .hero {
    min-height: auto;
    padding-block: var(--space-7) var(--space-6);
  }
  .hero-title {
    font-size: 2.4rem;
  }
  .hero-tagline {
    font-size: 1.4rem;
  }

  .scroll-panel {
    padding: var(--space-6) var(--space-3);
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .story-frame {
    padding: var(--space-5) var(--space-3);
  }
  .kingdom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .story-footer-logo {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .wallpaper-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-brand p {
    margin-inline: auto;
  }
  .footer-phones {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .copyright {
    text-align: center;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    width: 100%;
  }
  .store-badges {
    flex-direction: column;
  }
}

/* =========== */
/* new style added */
/* .feature-card-image{
 
} */

.v-hide {
  visibility: hidden;
}
.image-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-image-download {
  background-image: url(./assets/img/Download-image.png);
  background-position: center;
  height: 500px;
}

.download-samrat-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-heading {
  margin-top: 30px;
}

.hero-tagline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;

  margin: 0;
}

.hero-tagline span {
  display: block;

  background: linear-gradient(
    to bottom,
    #ffe8a6 0%,
    #ffd56c 30%,
    #e9af3b 65%,
    #f2d675 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* text-shadow:
        0 2px 2px rgba(0,0,0,.45),
        0 4px 10px rgba(0,0,0,.45); */
}

/* download btn */
.download-btn {
  display: inline-block;
  text-decoration: none;
}

.download-btn img {
  display: block;
  width: 340px; /* Adjust according to your image */
  height: auto;
  transition: transform 0.3s ease;
}

.download-btn:hover img {
  transform: scale(1.03);
}

.download-btn img {
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* play store style */

.store-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 25px;
}

.store-badge {
  display: block;
  transition: transform 0.3s ease;
}

.store-badge img {
  display: block;
  width: 170px; /* Adjust as needed */
  height: auto;
}

.store-badge:hover {
  transform: translateY(-3px);
}

.story-section {
  background: #090704;
  padding: 80px 0;
}

.story-frame {
  position: relative;

  width: 100%;
  /* max-width:1000px; */

  margin: 0 auto;

  background: url("./assets/img/story bg-image.png") center top no-repeat;

  background-size: 100% 100%;

  min-height: 1500px;
}

.story-content {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  padding: 120px 90px 120px;

  z-index: 2;
}

.story-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 120px 0;
}

.story-center {
  width: 42%;

  text-align: center;
}

.story-card {
  width: 240px;
}

.story-card img {
  width: 100%;
  display: block;
}

.story-quote {
  position: relative;
  /* max-width: 760px; */
  padding: 5px 30px;
  text-align: center;
}

.story-quote::before,
.story-quote::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 18px;
  background: url("./assets/img/line.png") center no-repeat;
  background-size: contain;
}

.story-quote::before {
  top: 0;
}

.story-quote::after {
  bottom: 0;
}

.story-quote-text {
  margin: 0;
  /* font-family: "Cinzel", serif; */
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  color: #d4af37;
  text-transform: uppercase;
}

.story-ending {
  margin-top: 20px;
  text-align: center;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;

  color: var(--color-text-light);
  text-transform: uppercase;
}

/* download section */
/*==================================
DOWNLOAD SECTION
===================================*/

.download-section {
  position: relative;

  width: 100%;

  padding: 40px 20px;

  background: #090603;
}

.download-content {
  position: relative;

  max-width: 1100px;

  margin: auto;

  min-height: 430px;

  background: url("./assets/img/Download-image.png") center/100% 100% no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 50px 60px 30px;
}

.get-app-btn {
  position: absolute;
  bottom: 120px;
}

.get-app-btn img {
  width: 280px;

  transition: 0.3s;
}

.get-app-btn:hover img {
  transform: scale(1.03);
}

.download-footer {
  width: 82%;

  background: #111;

  border: 2px solid #7b5a18;

  border-radius: 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 30px;
  position: absolute;
  bottom: 18px;
  flex-wrap: wrap;
}

.store-buttons {
  display: flex;

  gap: 18px;
}

.store-buttons img {
  width: 170px;

  display: block;
}

/*==========================
GAMEPLAY SECTION
==========================*/

.gameplay-section {
  position: relative;

  background: url("./assets/img/gameplay/gameplay-bg.png") center center/cover
    no-repeat;

  min-height: 850px;

  overflow: hidden;

  display: flex;
  align-items: center;

  padding: 90px 0;
}

.gameplay-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.gameplay-left {
  position: relative;

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;
}

.gameplay-warrior {
  width: 520px;

  max-width: none;

  margin-left: -40px;

  display: block;
}

.gameplay-right {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

.gameplay-right img::after {
  content: "";
  background: url(./assets/img/gameplay/gp-line.png);
}

.gameplay-title {
  width: 420px;
  max-width: 100%;
}

.gameplay-subtitle {
  color: #ececec;
  font-size: 22px;
  font-family: "Cinzel", serif;
  text-align: center;
}

.gameplay-frame {
  position: relative;

  width: 100%;

  max-width: 650px;
}

.frame-img {
  width: 100%;

  display: block;
}

.frame-content {
  position: absolute;

  inset: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 50px;

  text-align: center;
}

.frame-content p {
  color: #ffffff;

  font-size: 24px;

  line-height: 1.6;

  font-family: "Poppins", sans-serif;

  font-weight: 500;
}

.gameplay-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.gameplay-title {
  width: 420px;
  max-width: 100%;
  display: block;
}

.gameplay-divider {
  width: 360px;
  max-width: 90%;
  display: block;
  margin: 8px auto 14px;
}

.build-team-section {
  background: #000;
  padding: 30px 0;
}

.team-heading {
  text-align: center;

  margin-bottom: 70px;
}

.title-wrap {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;
}

.title-wrap h2 {
  color: #d7a42e;
  font-size: 36px;
  font-family: "Cinzel";
}

.title-wrap img {
  width: 50px;
}

.team-heading p {
  color: var(--color-text-light);

  font-size: var(--fs-h3);

  margin-top: 15px;
}

.team-layout {
  display: grid;

  /* grid-template-columns:42% 58%; */
  grid-template-columns: 38% 59%;

  gap: 35px;

  align-items: start;
}

.team-left {
  position: relative;
}

.scroll-bg {
  width: 100%;

  display: block;
}

.scroll-content {
  position: absolute;
  top: 20%;
  left: 18%;
  width: 65%;
}

.scroll-content h3 {
  color: #6d0f0f;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 35px;
  text-align: center;
}

.row-content {
  display: grid;

  grid-template-columns: 40% 60%;

  margin-bottom: 16px;
}

.row-content h4 {
  font-size: 16px;

  color: #3f1308;
}

.row-content p {
  font-size: 14px;
  color: #222;
  line-height: 1.5;
  font-weight: 600;
}

.team-right {
  display: flex;

  flex-direction: column;

  gap: 24px;
}

.team-card {
  position: relative;
}

.team-card > img {
  width: 100%;

  display: block;
}

.card-content {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  padding: 0 45px;
}

.card-content > img {
  width: 50px;
}

.card-content h3 {
  width: 150px;
  font-size: 22px;
  color: #4d1308;
  margin-left: 25px;
}

.soldiers {
  margin-left: auto;

  display: flex;

  gap: 18px;
}

.soldiers img {
  width: 90px;
}

/*==========================
ELITE CHARACTERS
===========================*/

.elite-character-section {
  background: #000;
  padding: 60px 0;
}

.elite-character-container {
  max-width: 1280px;

  margin: auto;

  padding: 0 20px;
}

.elite-header {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  margin-bottom: 70px;
}

.line {
  width: 220px;

  max-width: 100%;
}

.elite-title {
  background: linear-gradient(#5a0d0d, #300707);

  border: 2px solid #cfa33b;

  color: #e4b33d;

  font-size: 24px;

  font-family: "Cinzel", serif;

  padding: 18px 40px;

  border-radius: 8px;

  white-space: nowrap;
}

.elite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.elite-card {
  display: flex;

  flex-direction: column;

  align-items: center;
}

.card-image {
  width: 100%;

  max-width: 330px;

  display: block;

  transition: 0.4s;
}

.elite-card:hover .card-image {
  transform: translateY(-8px) scale(1.03);
}

.elite-btn {
  position: relative;

  width: 280px;

  margin-top: 28px;
}

.elite-btn img {
  width: 100%;

  display: block;
}

.elite-btn span {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  color: #d9a72d;

  font-size: 28px;

  font-weight: 700;

  font-family: "Poppins", sans-serif;

  text-transform: uppercase;
}

/*=========================
 BATTLE RULES
==========================*/
.battle-title h2 {
  color: #e9b52d;
  font-size: 42px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 2px;
  text-align: center;
}

.battle-grid {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 25px;
  flex-wrap: wrap;
}

/* All cards same size */

.battle-card {
  position: relative;
  width: 270px;
  transition: all 0.35s ease;
  cursor: pointer;
  transform: scale(0.88);
  /* opacity:.75; */
}

.card-frame {
  width: 100%;
  display: block;
}

.battle-card-content {
  position: absolute;
  inset: 0;
  padding: 40px 18px;
  display: flex;
  flex-direction: column;
}

.battle-card-content h3 {
  text-align: center;
  color: #e8b32c;
  font-size: 24px;
  margin-bottom: 15px;
  font-family: var(--font-heading);
}

.battle-image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.unit-icon {
  width: 46px;
}

.unit {
  width: 90px;
}

/* Hide content initially */

.battle-list {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: 0.35s;
}

/* Hover card */

.battle-card:hover,
.battle-card.active-card {
  transform: scale(1);

  /* opacity:1; */

  z-index: 5;
}

/* Show content */

.battle-card:hover .battle-list,
.battle-card.active-card .battle-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Other cards */

.battle-grid:hover .battle-card:not(:hover) {
  transform: scale(0.82);
  opacity: 0.55;
}

/* Glow */

.battle-card:hover .card-frame,
.battle-card.active-card .card-frame {
  filter: drop-shadow(0 0 18px rgba(232, 179, 44, 0.45));
}
/*==============================
SPECIAL POWERS
==============================*/

.sp-section {
  background: #000;
  padding: 30px 0;
  overflow: hidden;
}

/* Heading */

.sp-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-bottom: 70px;
}

.sp-heading span {
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
}

.sp-heading h2 {
  color: #d9a620;
  font-size: 46px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1;
  border-top: 1px solid var(--color-gold);
  border-bottom: 1px solid var(--color-gold);
  width: 100%;
  text-align: center;
}

/* Layout */

.sp-wrapper {
  display: grid;
  grid-template-columns: 430px 1fr;
  align-items: center;
  gap: 50px;
}

/* Left */

.sp-content h3 {
  font-size: 48px;
  color: #d9a620;
  margin-bottom: 20px;
  font-family: var(--font-heading);
}

.sp-content h3 span {
  color: #ffcb3c;
}

.sp-description {
  color: #ffffff;
  font-size: 23px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.sp-list,
.battle-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-list li,
.battle-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 8px;
  color: #fff;
  line-height: 1.6;
}
.battle-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;

  width: 14px;
  height: 14px;

  background: url("./assets/icons/gameball-icon.png") no-repeat center;
  background-size: contain;
}

.sp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;

  width: 18px;
  height: 18px;

  background: url("./assets/icons/gameball-icongold.png") no-repeat center;
  background-size: contain;
}

/* Cards */

/* ===========================
   Special Power Cards
=========================== */

.sp-cards {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
}

/* All cards start same size */
.sp-card {
  position: relative;
  width: 260px;
  cursor: pointer;
  transition: all 0.35s ease;
  transform: scale(0.88);
  opacity: 0.75;
}

.sp-card img {
  width: 100%;
  display: block;
  transition: all 0.35s ease;
}

/* Active / Hover Card */
.sp-card.active-card,
.sp-card:hover {
  transform: scale(1);

  opacity: 1;

  z-index: 10;
}

/* Glow Effect */

.sp-card.active-card img,
.sp-card:hover img {
  filter: drop-shadow(0 0 10px rgba(216, 167, 33, 0.45))
    drop-shadow(0 0 30px rgba(216, 167, 33, 0.25));
}

/* Slightly shrink inactive cards */

.sp-cards:hover .sp-card:not(:hover) {
  transform: scale(0.85);

  opacity: 0.6;
}

/* Card Title */

.sp-card-title {
  position: absolute;

  left: 0;

  bottom: 18px;

  width: 100%;

  text-align: center;

  color: #d8a721;

  font-family: var(--font-heading);

  font-size: 18px;

  text-transform: uppercase;

  pointer-events: none;
}

.power-content {
  display: none;
  animation: fade 0.35s ease;
}

.power-content.active {
  display: block;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.sp-card {
  cursor: pointer;
  transition: 0.35s;
}

.sp-card.active-card {
  transform: translateY(-12px);
}

.sp-card.active-card img {
  filter: drop-shadow(0 0 20px rgba(216, 167, 33, 0.6));
}

.sp-card:hover {
  transform: translateY(-12px);
}

.sp-card img {
  transition: 0.35s;
}
/*=====================================
 STRATEGY SECTION
======================================*/

.strategy-section {
  padding: 30px 0;
  background: url("../img/gameplay/gameplay-bg.png") center center/cover
    no-repeat;
  position: relative;
}

.strategy-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.strategy-section .container {
  position: relative;
  z-index: 2;
}

/* Frame */

.strategy-box {
  position: relative;
  max-width: 760px;
  margin: auto;
}

.strategy-frame {
  width: 100%;
  display: block;
}

/* Content */

.strategy-content {
  position: absolute;
  /* inset:0; */
  top: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 70px 65px;

  text-align: center;
}

.strategy-icon {
  width: 120px;
  margin-top: -105px;
  margin-bottom: 20px;
}

.strategy-title {
  font-size: 36px;
  color: #d9a722;
  font-family: var(--font-heading);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.strategy-divider {
  width: 230px;
  height: 2px;
  background: #b98d22;
  margin-bottom: 35px;
}

.strategy-stats {
  display: flex;
  justify-content: center;
  gap: 90px;

  width: 100%;

  margin-bottom: 6px;
}

.strategy-stat {
  display: flex;
  align-items: center;
  gap: 18px;
}

.strategy-stat h3 {
  color: #e0ae2d;
  font-size: 64px;
  font-family: var(--font-heading);
}

.strategy-stat p {
  color: #fff;
  font-size: 28px;
  line-height: 1.4;
  text-align: left;
  font-weight: 600;
}

.strategy-text {
  color: #fff;
  font-size: 22px;
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 6px;
}

.strategy-bottom {
  color: #d5a125;
  font-size: 22px;
  font-family: var(--font-heading);
}

/*=====================================
 Tablet
======================================*/

@media (max-width: 991px) {
  .strategy-content {
    padding: 50px 35px;
  }

  .strategy-title {
    font-size: 38px;
  }

  .strategy-stat h3 {
    font-size: 48px;
  }

  .strategy-stat p {
    font-size: 20px;
  }

  .strategy-text {
    font-size: 22px;
  }

  .strategy-bottom {
    font-size: 22px;
  }

  .strategy-icon {
    width: 90px;
    margin-top: -80px;
  }
}

/*=====================================
 Mobile
======================================*/

@media (max-width: 767px) {
  .strategy-content {
    position: relative;
    padding: 40px 25px;
    top: 30px;
  }

  .strategy-frame {
    display: none;
  }

  .strategy-box {
    border: 3px solid #b88618;
    background: #24180f;
    border-radius: 15px;
  }

  .strategy-icon {
    position: relative;
    /* margin-top: -85px; */
    width: 80px;
  }

  .strategy-title {
    font-size: 30px;
  }

  .strategy-divider {
    width: 150px;
  }

  .strategy-stats {
    flex-direction: column;
    gap: 25px;
  }

  .strategy-stat {
    justify-content: center;
  }

  .strategy-stat h3 {
    font-size: 42px;
  }

  .strategy-stat p {
    font-size: 18px;

    text-align: center;
  }

  .strategy-text {
    font-size: 18px;
  }

  .strategy-bottom {
    font-size: 18px;
  }
 
}

/*=====================================
 Small Mobile
======================================*/

@media (max-width: 480px) {
  .strategy-title {
    font-size: 24px;
  }

  .strategy-stat {
    flex-direction: column;
    gap: 5px;
  }

  .strategy-stat h3 {
    font-size: 36px;
  }

  .strategy-stat p {
    font-size: 16px;
  }

  .strategy-text {
    font-size: 16px;
  }

  .strategy-bottom {
    font-size: 16px;
  }
}

/*=========================
Laptop
=========================*/

@media (max-width: 1400px) {
  .sp-wrapper {
    grid-template-columns: 370px 1fr;
  }

  .sp-card-large {
    width: 290px;
  }

  .sp-card {
    width: 200px;
  }
}

/*=========================
Tablet
=========================*/

@media (max-width: 992px) {
  .sp-wrapper {
    grid-template-columns: 1fr;
  }

  .sp-content {
    text-align: center;
  }

  .sp-list {
    max-width: 650px;
    margin: auto;
  }

  .sp-cards {
    justify-content: center;
    margin-top: 50px;
    flex-wrap: wrap;
  }
}

/*=========================
Mobile
=========================*/

@media (max-width: 768px) {
  .sp-heading h2 {
    font-size: 34px;
  }

  .sp-heading {
    gap: 12px;
  }

  .sp-content h3 {
    font-size: 32px;
  }

  .sp-description {
    font-size: 18px;
  }

  .sp-list li {
    font-size: 17px;
    text-align: left;
  }

  .sp-cards {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .sp-card-large,
  .sp-card {
    width: 280px;
  }

  .sp-card-title {
    font-size: 18px;
  }
}

/*=========================
Small Mobile
=========================*/

@media (max-width: 480px) {
  .sp-section {
    padding: 50px 0;
  }

  .sp-heading h2 {
    font-size: 28px;
  }

  .sp-content h3 {
    font-size: 28px;
  }

  .sp-description {
    font-size: 16px;
  }

  .sp-list li {
    font-size: 15px;
  }

  .sp-card-large,
  .sp-card {
    width: 240px;
  }
}

/*=========================
 Tablet
==========================*/

@media (max-width: 1200px) {
  .battle-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* .battle-card-large {
    grid-column: span 2;
  } */
}

/*=========================
 Mobile
==========================*/

@media (max-width: 768px) {
  .battle-title h2 {
    font-size: 34px;
  }

   .title-wrap h2{
    font-size: 34px;
  }

  .battle-grid {
    grid-template-columns: 1fr;

    gap: 3px;
  }

  .battle-card-large {
    grid-column: auto;
  }

  .card-content {
    padding: 20px;
  }

  .card-content h3 {
    font-size: 24px;
  }

  .unit {
    width: 120px;
  }

  .battle-card-large .unit {
    width: 120px;
  }

  .unit-icon {
    width: 60px;
  }

  .card-content li {
    font-size: 15px;

    line-height: 1.6;
  }
}

/* Small phones */

@media (max-width: 480px) {
  .battle-title {
    margin-bottom: 40px;
  }

  .card-content h3 {
    font-size: 14px;
    margin-left: 14px;
  }

  .unit {
    width: 95px;
  }

  .battle-card-large .unit {
    width: 80px;
  }

  .unit-icon {
    width: 50px;
  }

  .card-content {
    padding: 18px;
  }

  .card-content li {
    font-size: 14px;
  }

  .card-content > img {
    width: 14px;
  }

  .soldiers img {
    width: 22px;
  }
}

@media (max-width: 992px) {
  .elite-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .line {
    width: 130px;
  }

  .elite-title {
    font-size: 24px;

    padding: 15px 30px;
  }
}

@media (max-width: 768px) {
  .elite-header {
    flex-direction: column;

    gap: 15px;
  }

  .left-line,
  .right-line {
    width: 180px;
  }

  .elite-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .card-image {
    max-width: 280px;
  }

  .elite-btn {
    width: 230px;
  }

  .elite-btn span {
    font-size: 22px;
  }

  .elite-title {
    font-size: 22px;

    padding: 14px 25px;
  }

  .row-content h4 {
    font-size: 12px;
  }

  .row-content p {
    font-size: 12px;
  }
  .scroll-content h3 {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .team-layout {
    grid-template-columns: 1fr;
  }

  .team-left {
    max-width: 700px;

    margin: auto;
  }

  .team-right {
    margin-top: 40px;
  }
}

@media (max-width: 1200px) {
  .gameplay-warrior {
    width: 450px;
  }

  .frame-content {
    padding: 45px;
  }

  .frame-content p {
    font-size: 18px;
  }

  .gameplay-title {
    width: 340px;
  }
}

@media (max-width: 991px) {
  .gameplay-wrapper {
    flex-direction: column-reverse;

    text-align: center;
  }

  .gameplay-left {
    justify-content: center;
  }

  .gameplay-warrior {
    width: 430px;

    margin: 0 auto;
  }

  .gameplay-right {
    margin-top: 20px;
  }

  .gameplay-title {
    width: 280px;
  }

  .gameplay-subtitle {
    font-size: 22px;

    margin-bottom: 35px;
  }

  .frame-content {
    padding: 40px;
  }

  .frame-content p {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .gameplay-section {
    min-height: auto;

    padding: 60px 0;
  }

  .gameplay-warrior {
    width: 300px;
  }

  .gameplay-title {
    width: 220px;
  }

  .gameplay-subtitle {
    font-size: 18px;

    margin-bottom: 20px;
  }

  .gameplay-frame {
    max-width: 100%;
  }

  .frame-content {
    padding: 25px;
  }

  .frame-content p {
    font-size: 14px;

    line-height: 1.5;
  }
}

@media (max-width: 991px) {
  .story-frame {
    background-size: cover;

    min-height: auto;
  }

  .story-content {
    position: relative;

    padding: 60px 25px;
  }

  .story-row {
    flex-direction: column;

    gap: 40px;
  }

  .story-center {
    width: 100%;
  }

  .story-card {
    width: 220px;
  }
}

@media (max-width: 991px) {
  .hero-tagline {
    font-size: 3.2rem;
  }
}

@media (max-width: 768px) {
  .hero-tagline {
    font-size: 2.4rem;
    line-height: 1.1;
  }
}

@media (max-width: 768px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }

  .btn-outline {
    height: 70px;
  }
}

@media (max-width: 991px) {
  .main-nav {
    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    background: #050505;

    flex-direction: column;

    padding: 25px 0;

    gap: 22px;

    display: none;
  }

  .main-nav.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

@media (max-width: 768px) {
  .logo img {
    width: 105px;
  }

  .header-inner {
    padding: 14px 16px;
  }
}

/* header */
@media (max-width: 991px) {
  .hero {
    min-height: 90vh;
    background-position: 65% center;
  }

  .hero-inner {
    padding: 120px 30px 60px;
  }

  .hero-content {
    max-width: 480px;
  }

  .social-link-container {
    flex-direction: column-reverse;
    gap: 22px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 100vh;

    background-position: 72% center;
    background-size: cover;
  }

  .hero-inner {
    padding: 100px 20px 40px;

    justify-content: center;
  }

  .mbv-hero-logo {
    width: 100px;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-desc {
    margin: 20px auto;
  }

  .features {
    padding-block: var(--space-3) var(--space-3);
  }

  .section-title--light-mb {
    color: var(--color-gold-bright);
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
  }

  .story-frame {
    background: unset;
  }

  .story-content {
    padding: 12px 25px;
  }

  .story-img-mbv {
    display: block;
  }

  .download-section {
    margin-top: 50px;
    margin-bottom: 80px;
  }

  .download-content {
    position: unset;
    background: unset;
    min-height: 0;
  }

  .download-footer h3 {
   font-size: 14px;
   margin-bottom: 8px;
  }

  .download-footer {
    bottom: -58px;
  }
}

@media (min-width: 991px) {
  .story-img-mbv {
    display: none;
  }
}

/* About section */

/*=========================================
ABOUT HERO
==========================================*/

.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  width: 100%;
  background: url("./assets/img/about/about-hero-bg.png") center center/cover
    no-repeat;
  display: flex;
  align-items: center;
}

.about-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  /* background:linear-gradient(to right,
    rgba(0,0,0,.85) 25%,
    rgba(0,0,0,.45) 60%,
    rgba(0,0,0,.15)); */
}

.about-hero-wrapper {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 55% 45%;

  align-items: center;

  gap: 40px;
}

.about-left {
  max-width: 600px;
}

.about-small-title {
  color: #d3a329;

  font-size: 17px;

  letter-spacing: 3px;

  display: block;

  margin-bottom: 10px;
}

.about-title {
  font-size: 72px;

  line-height: 1;

  color: #d7a31f;

  font-family: "Cinzel", serif;

  margin-bottom: 15px;

  text-transform: uppercase;
}

.about-subtitle {
  color: #efc44f;

  font-size: 28px;

  margin-bottom: 20px;

  font-weight: 600;
}

.about-text {
  color: #ffffff;

  line-height: 1.9;

  font-size: 17px;

  max-width: 560px;

  margin-bottom: 35px;
}

.about-buttons {
  margin-bottom: 20px;
}

.about-download-btn img {
  width: 280px;

  transition: 0.4s;
}

.about-download-btn:hover img {
  transform: scale(1.05);
}

.store-buttons {
  display: flex;

  gap: 15px;

  flex-wrap: wrap;
}

.store-buttons img {
  width: 180px;

  transition: 0.3s;
}

.store-buttons img:hover {
  transform: translateY(-5px);
}

.about-right {
  padding-top: 30px;
  text-align: right;
}

.about-right img {
  width: 100%;

  max-width: 560px;

  /* animation:heroFloat 5s ease-in-out infinite; */

  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
}

/* Floating Animation */

@keyframes heroFloat {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0px);
  }
}

/*=========================
Tablet
=========================*/

@media (max-width: 992px) {
  .about-hero {
    min-height: auto;

    padding: 120px 0 80px;
  }

  .about-hero-wrapper {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .about-left {
    margin: auto;
  }

  .about-buttons{
    display: flex;
    justify-content: center;
  }

  .about-right {
    padding-top: 0px;
    text-align: center;
  }



  .about-title {
    font-size: 58px;
  }

  .about-subtitle {
    font-size: 24px;
  }

  .about-download-btn img {
    width: 240px;
  }

  .store-buttons {
    justify-content: center;
  }
}

/*=========================
Mobile
=========================*/

@media (max-width: 576px) {
  .about-title {
    font-size: 42px;
  }

  .about-small-title {
    font-size: 13px;
  }

  .about-subtitle {
    font-size: 20px;
  }

  .about-text {
    font-size: 15px;

    line-height: 1.7;
  }

  .about-download-btn img {
    width: 210px;
  }

  .store-buttons img {
    width: 145px;
  }

  .about-right img {
    max-width: 320px;
  }
}

/*=====================================
BUILD YOUR EMPIRE
=====================================*/

.about-build-section {
  padding: 60px 0;
  background: #000;
}

.build-card {
  max-width: 1150px;
  margin: auto;

  border: 2px solid #b8891f;
  border-radius: 8px;

  padding: 50px;

  background: #080808;

  position: relative;
}

.build-heading {
  text-align: center;
  margin-bottom: 40px;
}

.build-heading h2 {
  color: #e1ae2d;
  font-size: 28px;
  font-family: var(--font-heading);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin-bottom: 20px;
}

.gold-text{
   color: #e1ae2d;
  font-size: 18px;
  font-weight: 900;
}

.build-heading h2 img {
  width: 32px;
}

.build-divider {
  width: 100%;
  max-width: 700px;

  height: 2px;

  background: #b98d22;

  margin: 25px auto;

  position: relative;
}

.build-divider::before,
.build-divider::after {
  content: "◆";

  position: absolute;

  color: #d8a721;

  top: -11px;

  font-size: 18px;
}

.build-divider::before {
  left: -10px;
}

.build-divider::after {
  right: -10px;
}

.build-heading p {
  color: #e8e8e8;

  font-size: 18px;

  line-height: 1.8;

  max-width: 850px;

  margin: auto;
}

.build-image {
  overflow: hidden;

  border-radius: 8px;

  border: 1px solid #b8891f;
}

.build-image img {
  width: 100%;

  display: block;

  transition: 0.4s;
}

.build-image:hover img {
  transform: scale(1.04);
}

/*=========================
Tablet
=========================*/

@media (max-width: 992px) {
  .build-card {
    padding: 35px;
  }

  .build-heading h2 {
    font-size: 34px;
  }

  .build-heading p {
    font-size: 16px;
  }
}

/*=========================
Mobile
=========================*/

@media (max-width: 768px) {
  .about-build-section {
    padding: 70px 0;
  }

  .build-card {
    padding: 25px;
  }

  .build-heading h2 {
    font-size: 28px;
    flex-wrap: wrap;
  }

  .build-heading h2 img {
    width: 24px;
  }

  .build-heading p {
    font-size: 15px;
  }

  .build-divider {
    max-width: 260px;
  }
}

/*====================================
COMMAND LEGENDARY HEROES
=====================================*/

.legendary-section {
  position: relative;

  padding: 30px 0;

  background: url("./assets/img/about/legendary-bg.png") center/cover no-repeat;

  overflow: hidden;
}

.legendary-section::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.85)
  );
}

.legendary-section .container {
  position: relative;

  z-index: 2;
}

.legendary-heading {
  text-align: center;

  margin-bottom: 70px;
}

.legendary-heading h2 {
  font-size: 46px;

  color: #d8a721;

  font-family: "Cinzel", serif;

  margin-bottom: 20px;
}

.legendary-heading p {
  color: #ddd;

  font-size: 18px;

  max-width: 760px;

  margin: auto;

  line-height: 1.8;
}

/*==========================
Hero Layout
===========================*/

.legendary-wrapper {
  display: flex;

  justify-content: center;

  align-items: flex-end;

  gap: 0;

  position: relative;
}

/* Common */

.legendary-wrapper img {
  transition: 0.45s;

  filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.6));
}

.legendary-wrapper img:hover {
  transform: translateY(-10px) scale(1.03);
}

/* Left Horse */

.hero-side.left {
  width: 180px;

  margin-right: -45px;

  z-index: 1;
}

/* Knight */

.hero-left {
  width: 220px;

  margin-right: -60px;

  z-index: 2;
}

/* Main Hero */

.hero-center {
  width: 330px;

  position: relative;

  z-index: 5;
}

/* Queen */

.hero-right {
  width: 220px;

  margin-left: -60px;

  z-index: 2;
}

/* Alchemist */

.hero-side.right {
  width: 180px;

  margin-left: -45px;

  z-index: 1;
}

/*=======================
Tablet
=======================*/

@media (max-width: 992px) {
  .legendary-wrapper {
    flex-wrap: wrap;

    gap: 20px;
  }

  .hero-center {
    width: 260px;

    order: 1;
  }

  .hero-left,
  .hero-right {
    width: 180px;

    margin: 0;
  }

  .hero-side.left,
  .hero-side.right {
    width: 140px;

    margin: 0;
  }
}

/*=====================
Mobile
======================*/

@media (max-width: 768px) {
  .legendary-section {
    padding: 30px 0;
  }

  .legendary-heading h2 {
    font-size: 34px;
  }

  .legendary-heading p {
    font-size: 15px;
  }



  .legendary-wrapper {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    justify-items: center;
  }

  .hero-center {
    grid-column: 1/3;

    width: 240px;

    order: -1;
  }

  .hero-left,
  .hero-right {
    width: 150px;
  }

  .hero-side.left,
  .hero-side.right {
    width: 130px;
  }
}

@media (max-width: 480px) {
  .legendary-wrapper {
    grid-template-columns: 1fr;
  }

  .hero-center {
    grid-column: auto;

    width: 220px;
  }

  .hero-left,
  .hero-right,
  .hero-side.left,
  .hero-side.right {
    width: 170px;
  }
}

/*=============================
MASTER STRATEGIC WARFARE
==============================*/

.warfare-section {
  /* padding:90px 0; */

  background: #000;
}

.warfare-heading {
  text-align: center;

  margin-bottom: 45px;
}

.warfare-heading h2 {
  color: #d8a721;

  font-size: 48px;

  font-weight: 700;

  margin-bottom: 15px;
}

.warfare-heading p {
  color: #ddd;

  font-size: 18px;
}

/*========================*/

.warfare-grid {
  display: grid;

  grid-template-columns: 38% 62%;

  gap: 22px;

  align-items: stretch;
}

/* LEFT IMAGE */

.battle-image {
  height: 100%;
}

.battle-image img {
  /* width:100%;

    height:100%; */

  object-fit: cover;

  display: block;
}
.battle-image .unit-icon {
  border: 2px solid #b8860b;

  border-radius: 50px;
}

/*====================*/

.strategy-side {
  display: flex;

  flex-direction: column;

  gap: 18px;
}

/* BIG CARD */

.strategy-main img {
  width: 100%;

  display: block;
}

/* SMALL CARDS */

.strategy-cards {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.strategy-cards img {
  width: 100%;

  display: block;
}

/* Hover */

.strategy-main img,
.strategy-cards img,
.battle-image img {
  transition: 0.35s;
}

.strategy-main img:hover,
.strategy-cards img:hover,
.battle-image img:hover {
  transform: translateY(-6px);
}

/*======================
TABLET
=======================*/

@media (max-width: 991px) {
  .warfare-grid {
    grid-template-columns: 1fr;
  }

  .strategy-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .battle-image {
    max-width: 650px;

    margin: auto;
  }
}

/*=====================
MOBILE
======================*/

@media (max-width: 768px) {
  .warfare-heading h2 {
    font-size: 34px;
  }

  .warfare-heading p {
    font-size: 15px;
  }

  .strategy-cards {
    grid-template-columns: 1fr;

    gap: 15px;
  }
}

/*=========================================
FORGE ALLIANCE
==========================================*/

.alliance-section {
  position: relative;

  padding: 90px 0;

  background: #050505 url("./assets/img/about/alliance-bg.png") center
    center/cover no-repeat;

  overflow: hidden;
}

.alliance-section::before {
  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);
}

.alliance-section .container {
  position: relative;

  z-index: 2;
}

/* Heading */

.alliance-header {
  text-align: center;

  margin-bottom: 55px;
}

.alliance-header h2 {
  color: #d8a721;

  font-size: 48px;

  font-weight: 700;

  margin-bottom: 18px;
}

.alliance-header p {
  color: #ffffff;

  font-size: 28px;

  font-family: "Cinzel", serif;

  text-transform: uppercase;

  letter-spacing: 1px;
}

/*============================*/

.alliance-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px 40px;

  max-width: 1150px;

  margin: auto;
}

/*============================*/

.alliance-item {
  position: relative;
}

.alliance-item > img {
  width: 100%;

  display: block;
}

.alliance-content {
  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  padding: 0 35px;

  gap: 18px;
}

.alliance-content img {
  width: 46px;

  flex-shrink: 0;
}

.alliance-content span {
  color: #f4ede2;

  font-size: 24px;

  font-family: "Cinzel", serif;

  text-transform: uppercase;
}

/* Hover */

.alliance-item {
  transition: 0.35s;
}

.alliance-item:hover {
  transform: translateY(-6px) scale(1.02);
}

/* Bottom */

.alliance-footer {
  margin-top: 60px;

  text-align: center;

  color: #d8a721;

  font-size: 28px;

  font-family: "Cinzel", serif;

  text-transform: uppercase;

  line-height: 1.6;
}

/*=========================
Tablet
==========================*/

@media (max-width: 991px) {
  .alliance-grid {
    grid-template-columns: 1fr;

    max-width: 700px;
  }

  .alliance-header h2 {
    font-size: 38px;
  }

  .alliance-header p {
    font-size: 22px;
  }

  .alliance-footer {
    font-size: 22px;
  }
}

/*=========================
Mobile
==========================*/

@media (max-width: 576px) {
  .alliance-section {
    padding: 70px 0;
  }

  .alliance-header h2 {
    font-size: 30px;
  }

  .alliance-header p {
    font-size: 17px;

    line-height: 1.6;
  }

  .alliance-content {
    padding: 0 18px;

    gap: 12px;
  }

  .alliance-content img {
    width: 34px;
  }

  .alliance-content span {
    font-size: 15px;
  }

  .alliance-footer {
    font-size: 16px;

    line-height: 1.7;

    margin-top: 40px;
  }
}

/*==========================================
IMPERIAL THRONE
===========================================*/

.imperial-section {
  position: relative;

  padding: 30px 0;

  background: url("./assets/img/about/imperial-bg.png") center center/cover
    no-repeat;

  overflow: hidden;
}

.imperial-section::before {
  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.48);
}

.imperial-section .container {
  position: relative;

  z-index: 2;
}

/* Heading */

.imperial-title {
  text-align: center;

  margin-bottom: 60px;
}

.imperial-title h2 {
  color: #d8a721;

  font-size: 52px;

  font-weight: 700;
}

/*===========================*/

.imperial-wrapper {
  display: grid;

  grid-template-columns: 40% 60%;

  align-items: center;

  gap: 30px;
}

/* Left */

.imperial-left {
  text-align: center;
}

.imperial-left img {
  width: 100%;

  max-width: 360px;

  transition: 0.4s;
}

.imperial-left img:hover {
  transform: translateY(-8px);
}

/*===========================*/

.imperial-right {
  position: relative;
}

.imperial-right > img {
  width: 100%;

  display: block;
}

/* Text */

.imperial-content {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 60%;

  text-align: center;
}

.imperial-content p {
  color: #3c2a16;

  font-size: 21px;

  line-height: 1.8;

  font-weight: 600;
}

.imperial-content h4 {
  color: #d01e1e;

  font-size: 24px;

  margin: 25px 0 10px;

  font-weight: 700;
}

.imperial-content span {
  display: block;

  color: #b11616;

  font-size: 22px;

  font-weight: 700;
}

/*=========================
Tablet
==========================*/

@media (max-width: 991px) {
  .imperial-wrapper {
    grid-template-columns: 1fr;
  }

  .imperial-left {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
  }

  .imperial-title h2 {
    font-size: 40px;
  }

  .imperial-content {
    width: 58%;
  }

  .imperial-content p {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .imperial-content {
    width: 78%;
  }

  .imperial-content p {
    font-size: 12px;
  }

  .imperial-content h4 {
    font-size: 14px;
  }

  .imperial-content span {
    font-size: 13px;
  }
}

/*=====================================
    GAME FEATURES
======================================*/

.about-game-features {
  padding: 30px 0;
  background: #000;
}

.about-section-title {
  text-align: center;
  color: #e6ad2f;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 50px;
}

/* parchment */

.about-feature-scroll {
  max-width: 1150px;
  margin: auto;

  background: url("./assets/img/about/parchment.png") center/100% 100% no-repeat;

  padding: 70px 70px;
}

/* list */

.about-feature-list {
  display: flex;
  flex-direction: column;
}

.about-feature-item {
  display: flex;
  align-items: center;

  gap: 22px;

  padding: 18px 0;

  border-bottom:1px solid rgba(110,72,22,.35);

  position: relative;
}

.about-feature-item:last-child {
  border-bottom: none;
}

/* little divider */

.about-feature-item::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  transform: translateY(-50%);

  width: 28px;
  height: 12px;

  background: url("../img/about/divider-arrow.png") center/contain no-repeat;
}

.about-feature-icon {
  width: 62px;
  height: 62px;

  background: #4f2d11;

  border: 2px solid #7a5220;

  border-radius: 4px;

  display: flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;
}

.about-feature-icon img {
  width: 50px;
}

.about-feature-text {
  font-size: 31px;

  color: #4c2413;

  font-weight: 700;

  line-height: 1.3;
}

.legacy-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
}

/*=========================
Mobile
==========================*/

@media (max-width: 768px) {
  .imperial-section {
    padding: 70px 0;
  }

  .imperial-title {
    margin-bottom: 35px;
  }

  .imperial-title h2 {
    font-size: 30px;
  }

  .imperial-content {
    width: 72%;
  }

  .imperial-content p {
    font-size: 14px;

    line-height: 1.6;
  }

  .imperial-content h4 {
    font-size: 16px;

    margin: 12px 0 8px;
  }

  .imperial-content span {
    font-size: 15px;
  }

  .imperial-left img {
    max-width: 220px;
  }
  .about-feature-text {
    font-size: 14px;
  }

  .about-section-title{
    font-size: 34px;
  }
}

/*=============================
HERO
=============================*/

.privacy-hero {
  position: relative;

  background: url("./assets/img/privacy/privacy-banner.jpg") center/cover;

  padding-top: 100px;

  text-align: center;
}

.overlay {
  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.7);
}

.privacy-hero .container {
  position: relative;
  z-index: 2;
}

.privacy-hero h1 {
  font-family: "Cinzel", serif;

  font-size: 64px;

  color: #e8b73a;

  margin-bottom: 25px;
}

.privacy-hero p {
  max-width: 760px;

  margin: auto;

  line-height: 1.8;

  font-size: 20px;
}

.privacy-hero span {
  display: inline-block;

  margin-top: 30px;

  color: #d6b66b;
}

/*=============================
LAYOUT
=============================*/

.privacy-wrapper {
  padding: 30px 0;
}

.privacy-layout {
  display: grid;

  grid-template-columns: 280px 1fr;

  gap: 40px;
}

/*=============================
SIDEBAR
=============================*/

.privacy-sidebar {
  position: sticky;

  top: 120px;

  background: #111;

  border: 1px solid #8b671f;

  border-radius: 12px;

  height: max-content;

  overflow: hidden;
}

.privacy-sidebar h3 {
  background: #221709;

  color: #e8b73a;

  text-align: center;

  padding: 18px;
}

.privacy-sidebar ul {
  list-style: none;
}

.privacy-sidebar li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.privacy-sidebar a {
  display: block;

  padding: 18px 25px;

  color: #ddd;

  text-decoration: none;

  transition: 0.3s;
}

.privacy-sidebar a:hover {
  background: #2b1b09;

  color: #e8b73a;

  padding-left: 35px;
}

/*=============================
CARDS
=============================*/

.policy-card {
  background: #101010;

  border: 1px solid #7d5d1d;

  border-radius: 15px;

  padding: 40px;

  margin-bottom: 35px;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.policy-card h2 {
  color: #e8b73a;

  font-family: "Cinzel", serif;

  margin-bottom: 20px;
}

.policy-card h4 {
  color: #d8b04f;

  margin: 25px 0 15px;
}

.policy-card p {
  line-height: 1.9;

  color: #ddd;

  margin-bottom: 20px;
}

.policy-card ul {
  list-style: none;

  margin-top: 20px;
}

.policy-card li {
  position: relative;

  padding-left: 32px;

  margin-bottom: 15px;

  line-height: 1.8;
}

.policy-card li::before {
  content: "";

  position: absolute;

  left: 0;

  top: 5px;

  width: 18px;

  height: 18px;

  background: url("./assets/icons/check-gold.png") center/contain no-repeat;
}

/*=============================
RESPONSIVE
=============================*/

@media (max-width: 991px) {
  .privacy-layout {
    grid-template-columns: 1fr;
  }

  .privacy-sidebar {
    position: relative;

    top: 0;
  }
}

@media (max-width: 768px) {
  .privacy-hero {
    padding: 100px 20px;
  }

  .privacy-hero h1 {
    font-size: 42px;
  }

  .policy-card {
    padding: 25px;
  }

  .policy-card h2 {
    font-size: 26px;
  }
}

/*=========================================
INFO BOXES
==========================================*/

.policy-note {
  margin-top: 25px;

  padding: 22px;

  border-left: 5px solid #d8a621;

  background: #1a1a1a;

  color: #ddd;

  line-height: 1.8;

  border-radius: 6px;
}

.policy-warning {
  margin-top: 30px;

  padding: 24px;

  background: #26170a;

  border: 1px solid #c78c1b;

  color: #ffe2a4;

  border-radius: 8px;

  line-height: 1.8;
}

/*=========================================
CARD HOVER
==========================================*/

.policy-card {
  transition: 0.35s;
}

.policy-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 35px rgba(216, 166, 33, 0.12);
}

/*=========================================
RESPONSIVE
==========================================*/

@media (max-width: 768px) {
  .policy-note,
  .policy-warning {
    padding: 18px;

    font-size: 15px;

    line-height: 1.7;
  }
}

/*======================================
TERMS PAGE
======================================*/

.terms-section {
  padding: 8px 0;

  background: #090909;
}

.terms-layout {
  display: grid;

  grid-template-columns: 300px 1fr;

  gap: 50px;
}

/*======================================
HERO
======================================*/

.terms-hero {
  position: relative;

  /* height:450px; */
  padding: 100px 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: url("../img/privacy-banner.jpg") center/cover no-repeat;
}

.terms-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.82));
}

.terms-hero-content {
  position: relative;

  z-index: 2;

  text-align: center;
}

.terms-badge {
  display: inline-block;

  padding: 8px 25px;

  border: 1px solid #d6a624;

  color: #d6a624;

  border-radius: 50px;

  letter-spacing: 3px;

  font-size: 13px;

  margin-bottom: 20px;
}

.terms-hero h1 {
  font-size: 64px;

  color: #fff;

  margin-bottom: 20px;

  text-transform: uppercase;

  font-weight: 700;
}

.terms-hero p {
  color: #d5d5d5;

  font-size: 20px;

  line-height: 1.8;
}

/*======================================
SIDEBAR
======================================*/

.sidebar-box {
  position: sticky;

  top: 120px;

  background: #141414;

  border: 1px solid #3d2d11;

  border-radius: 15px;

  padding: 30px;
}

.sidebar-box h3 {
  color: #d6a624;

  margin-bottom: 25px;

  font-size: 24px;
}

.sidebar-box ul {
  padding: 0;

  margin: 0;

  list-style: none;
}

.sidebar-box li {
  margin-bottom: 12px;
}

.sidebar-box a {
  display: block;

  color: #d7d7d7;

  text-decoration: none;

  padding: 12px 15px;

  border-radius: 8px;

  transition: 0.3s;
}

.sidebar-box a:hover {
  background: #d6a624;

  color: #000;

  transform: translateX(5px);
}

/*======================================
CONTENT
======================================*/

.terms-content {
  display: flex;

  flex-direction: column;

  gap: 35px;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .terms-layout {
    grid-template-columns: 1fr;
  }

  .sidebar-box {
    position: relative;

    top: 0;
  }
}

@media (max-width: 768px) {
  .terms-hero {
    /* height:320px; */
    padding: 100px 30px;
  }

  .terms-hero h1 {
    font-size: 42px;
  }

  .terms-hero p {
    font-size: 17px;
  }

  .sidebar-box {
    padding: 20px;
  }
}

/*======================================
CONTENT CARD
======================================*/

.terms-card {
  background: #131313;

  border: 1px solid #3c2d14;

  border-radius: 18px;

  padding: 45px;

  transition: 0.35s;
}

.terms-card:hover {
  transform: translateY(-6px);

  box-shadow: 0 18px 40px rgba(214, 166, 36, 0.1);
}

.card-number {
  display: inline-block;

  padding: 6px 18px;

  border: 1px solid #d6a624;

  border-radius: 40px;

  color: #d6a624;

  font-size: 12px;

  letter-spacing: 2px;

  margin-bottom: 18px;
}

.terms-card h2 {
  color: #fff;

  font-size: 34px;

  margin-bottom: 30px;
}

.terms-card p {
  color: #d3d3d3;

  font-size: 17px;

  line-height: 1.9;

  margin-bottom: 20px;
}

/*======================================
INFO BOXES
======================================*/

.terms-info {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-bottom: 35px;
}

.info-box {
  background: #1b1b1b;

  border: 1px solid #4c3817;

  padding: 22px;

  border-radius: 12px;
}

.info-box span {
  display: block;

  color: #c3c3c3;

  margin-bottom: 8px;

  font-size: 14px;
}

.info-box strong {
  color: #d6a624;

  font-size: 20px;
}

/*======================================
HIGHLIGHT BOX
======================================*/

.terms-highlight {
  margin-top: 35px;

  padding: 30px;

  background: #26190a;

  border-left: 5px solid #d6a624;

  border-radius: 10px;
}

.terms-highlight h4 {
  color: #d6a624;

  margin-bottom: 12px;

  font-size: 22px;
}

.terms-highlight p {
  margin: 0;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 768px) {
  .terms-card {
    padding: 25px;
  }

  .terms-info {
    grid-template-columns: 1fr;
  }

  .terms-card h2 {
    font-size: 28px;
  }
}

/*======================================
SECTION LIST
======================================*/

.terms-list {
  display: flex;

  flex-direction: column;

  gap: 25px;

  margin: 35px 0;
}

.terms-item {
  display: flex;

  gap: 20px;

  align-items: flex-start;

  background: #181818;

  border: 1px solid #3c2d14;

  border-radius: 14px;

  padding: 22px;

  transition: 0.3s;
}

.terms-item:hover {
  transform: translateX(6px);

  border-color: #d6a624;
}

.terms-icon {
  width: 48px;

  height: 48px;

  min-width: 48px;

  border-radius: 50%;

  background: #d6a624;

  color: #111;

  font-size: 22px;

  font-weight: bold;

  display: flex;

  align-items: center;

  justify-content: center;
}

.terms-item h4 {
  color: #d6a624;

  font-size: 22px;

  margin-bottom: 10px;
}

.terms-item p {
  margin: 0;

  color: #d0d0d0;

  line-height: 1.8;
}

/*======================================
PARENT NOTE
======================================*/

.terms-note {
  margin-top: 35px;

  background: #24180b;

  border-left: 5px solid #d6a624;

  padding: 28px;

  border-radius: 10px;
}

.terms-note h4 {
  color: #d6a624;

  margin-bottom: 15px;

  font-size: 24px;
}

.terms-note p {
  margin: 0;

  color: #ececec;

  line-height: 1.9;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 768px) {
  .terms-item {
    flex-direction: column;

    align-items: flex-start;
  }

  .terms-icon {
    margin-bottom: 10px;
  }

  .terms-item h4 {
    font-size: 20px;
  }

  .terms-note {
    padding: 22px;
  }
}

/*======================================
LICENSE GRID
======================================*/

.license-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin-top: 35px;
}

/*======================================
LICENSE BOX
======================================*/

.license-box {
  background: #171717;

  border: 1px solid #3d2d14;

  border-radius: 16px;

  padding: 30px;

  transition: 0.35s;
}

.license-box:hover {
  transform: translateY(-6px);

  box-shadow: 0 15px 35px rgba(214, 166, 36, 0.1);
}

.license-title {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 25px;
}

.license-icon {
  width: 46px;

  height: 46px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  font-weight: 700;
}

.allowed .license-icon {
  background: #d6a624;

  color: #111;
}

.restricted .license-icon {
  background: #8d2b2b;

  color: #fff;
}

.license-title h3 {
  color: #fff;

  font-size: 26px;
}

.license-box ul {
  list-style: none;

  padding: 0;

  margin: 0;
}

.license-box li {
  position: relative;

  padding-left: 30px;

  margin-bottom: 16px;

  color: #d5d5d5;

  line-height: 1.8;
}

.allowed li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color: #d6a624;

  font-weight: bold;
}

.restricted li::before {
  content: "✕";

  position: absolute;

  left: 0;

  color: #d65b5b;

  font-weight: bold;
}

/*======================================
WARNING BOX
======================================*/

.terms-warning {
  margin-top: 40px;

  padding: 30px;

  background: #2a160f;

  border-left: 5px solid #d6a624;

  border-radius: 12px;
}

.terms-warning h4 {
  color: #d6a624;

  font-size: 24px;

  margin-bottom: 15px;
}

.terms-warning p {
  color: #ececec;

  margin: 0;

  line-height: 1.9;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .license-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .license-box {
    padding: 22px;
  }

  .license-title h3 {
    font-size: 22px;
  }

  .license-box li {
    font-size: 15px;
  }

  .terms-warning {
    padding: 22px;
  }
}

/*======================================
ACCOUNT GRID
======================================*/

.account-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;

  margin: 40px 0;
}

/*======================================
ACCOUNT CARD
======================================*/

.account-card {
  background: #171717;

  border: 1px solid #3f2f14;

  border-radius: 16px;

  padding: 30px;

  text-align: center;

  transition: 0.35s;
}

.account-card:hover {
  transform: translateY(-8px);

  border-color: #d6a624;

  box-shadow: 0 18px 35px rgba(214, 166, 36, 0.12);
}

.account-icon {
  width: 75px;

  height: 75px;

  margin: 0 auto 20px;

  border-radius: 50%;

  background: #d6a624;

  color: #111;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 34px;
}

.account-card h3 {
  color: #fff;

  margin-bottom: 15px;

  font-size: 22px;
}

.account-card p {
  color: #d5d5d5;

  line-height: 1.8;

  margin: 0;
}

/*======================================
ACCOUNT ALERT
======================================*/

.account-alert {
  margin-top: 30px;

  background: #1f1a0d;

  border-left: 5px solid #d6a624;

  border-radius: 12px;

  padding: 28px;
}

.account-alert h4 {
  color: #d6a624;

  font-size: 24px;

  margin-bottom: 15px;
}

.account-alert p {
  margin: 0;

  color: #ececec;
}

/*======================================
SUSPENSION BOX
======================================*/

.suspension-box {
  margin-top: 35px;

  background: #151515;

  border: 1px solid #403015;

  border-radius: 16px;

  padding: 35px;
}

.suspension-box h3 {
  color: #d6a624;

  margin-bottom: 20px;

  font-size: 28px;
}

.suspension-box p {
  color: #d5d5d5;

  margin-bottom: 25px;
}

.suspension-box ul {
  margin: 0;

  padding: 0;

  list-style: none;
}

.suspension-box li {
  position: relative;

  padding-left: 28px;

  margin-bottom: 16px;

  color: #d8d8d8;

  line-height: 1.8;
}

.suspension-box li::before {
  content: "►";

  position: absolute;

  left: 0;

  color: #d6a624;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .account-card {
    padding: 25px;
  }

  .account-icon {
    width: 65px;

    height: 65px;

    font-size: 28px;
  }

  .suspension-box {
    padding: 25px;
  }

  .suspension-box h3 {
    font-size: 24px;
  }
}

/*======================================
FAIR PLAY GRID
======================================*/

.fairplay-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;

  margin: 40px 0;
}

.fairplay-card {
  background: #171717;

  border: 1px solid #403015;

  border-radius: 16px;

  padding: 30px;

  text-align: center;

  transition: 0.35s;
}

.fairplay-card:hover {
  transform: translateY(-8px);

  border-color: #d6a624;

  box-shadow: 0 15px 35px rgba(214, 166, 36, 0.12);
}

.fairplay-icon {
  font-size: 46px;

  margin-bottom: 18px;
}

.fairplay-card h3 {
  color: #fff;

  margin-bottom: 15px;

  font-size: 22px;
}

.fairplay-card p {
  margin: 0;

  color: #d4d4d4;
}

/*======================================
SUB HEADING
======================================*/

.sub-heading {
  color: #d6a624;

  margin: 40px 0 25px;

  font-size: 28px;
}

/*======================================
PROHIBITED GRID
======================================*/

.prohibited-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.prohibited-item {
  background: #1b1b1b;

  border: 1px solid #403015;

  border-radius: 10px;

  padding: 18px;

  color: #ececec;

  transition: 0.3s;
}

.prohibited-item:hover {
  background: #291712;

  border-color: #c65b5b;
}

/*======================================
PENALTY BOX
======================================*/

.penalty-box {
  margin-top: 45px;

  background: #151515;

  border: 1px solid #403015;

  border-radius: 18px;

  padding: 35px;
}

.penalty-box h3 {
  text-align: center;

  color: #d6a624;

  margin-bottom: 35px;
}

.penalty-steps {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;
}

.penalty-step {
  flex: 1;

  text-align: center;
}

.step-circle {
  width: 65px;

  height: 65px;

  border-radius: 50%;

  background: #d6a624;

  color: #111;

  font-size: 26px;

  font-weight: bold;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 20px;
}

.penalty-step h4 {
  color: #fff;

  margin-bottom: 10px;
}

.penalty-step p {
  color: #d4d4d4;
}

.penalty-arrow {
  color: #d6a624;

  font-size: 32px;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .fairplay-grid {
    grid-template-columns: 1fr;
  }

  .prohibited-grid {
    grid-template-columns: 1fr 1fr;
  }

  .penalty-steps {
    flex-direction: column;
  }

  .penalty-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 768px) {
  .prohibited-grid {
    grid-template-columns: 1fr;
  }

  .fairplay-card {
    padding: 22px;
  }

  .penalty-box {
    padding: 25px;
  }

  .sub-heading {
    font-size: 24px;
  }
}

/*======================================
PURCHASE GRID
======================================*/

.purchase-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.purchase-card {
  background: #171717;

  border: 1px solid #403015;

  border-radius: 16px;

  padding: 35px;

  text-align: center;

  transition: 0.35s;
}

.purchase-card:hover {
  transform: translateY(-8px);

  border-color: #d6a624;

  box-shadow: 0 15px 35px rgba(214, 166, 36, 0.15);
}

.purchase-icon {
  font-size: 48px;

  margin-bottom: 18px;
}

.purchase-card h3 {
  color: #fff;

  margin-bottom: 15px;

  font-size: 24px;
}

.purchase-card p {
  margin: 0;

  color: #d4d4d4;

  line-height: 1.7;
}

/*======================================
PAYMENT BOX
======================================*/

.payment-box {
  margin-top: 45px;

  padding: 35px;

  border-radius: 18px;

  background: #151515;

  border: 1px solid #403015;
}

.payment-box h3 {
  text-align: center;

  margin-bottom: 35px;

  color: #d6a624;
}

.payment-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;
}

.payment-item {
  background: #1d1d1d;

  padding: 30px;

  border-radius: 14px;

  text-align: center;

  border: 1px solid #403015;
}

.payment-item:hover {
  border-color: #d6a624;
}

.payment-icon {
  font-size: 50px;

  margin-bottom: 20px;
}

.payment-item h4 {
  color: #fff;

  margin-bottom: 10px;

  font-size: 22px;
}

.payment-item p {
  margin: 0;

  color: #d4d4d4;
}

/*======================================
RULES BOX
======================================*/

.rules-box {
  margin-top: 45px;

  background: #181818;

  padding: 35px;

  border-radius: 16px;

  border: 1px solid #403015;
}

.rules-box h3 {
  margin-bottom: 25px;

  color: #d6a624;
}

.purchase-list {
  list-style: none;

  padding: 0;

  margin: 0;
}

.purchase-list li {
  position: relative;

  padding-left: 35px;

  margin-bottom: 18px;

  color: #d4d4d4;

  line-height: 1.8;
}

.purchase-list li::before {
  content: "✔";

  position: absolute;

  left: 0;

  top: 0;

  font-size: 18px;

  color: #d6a624;
}

/*======================================
IMPORTANT BOX
======================================*/

.highlight-box {
  margin-top: 35px;

  padding: 30px;

  border-left: 5px solid #d6a624;

  background: #231b0d;

  border-radius: 10px;
}

.highlight-box h4 {
  color: #d6a624;

  margin-bottom: 12px;

  font-size: 24px;
}

.highlight-box p {
  margin: 0;

  color: #eee;

  line-height: 1.8;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .purchase-grid {
    grid-template-columns: 1fr;
  }

  .payment-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .purchase-card {
    padding: 25px;
  }

  .payment-item {
    padding: 25px;
  }

  .rules-box {
    padding: 25px;
  }

  .highlight-box {
    padding: 20px;
  }

  .purchase-card h3 {
    font-size: 20px;
  }

  .payment-item h4 {
    font-size: 20px;
  }
}

/*======================================
REFUND BANNER
======================================*/

.refund-banner {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: linear-gradient(135deg, #5a1212, #2b0909);

  border: 1px solid #9d3131;

  border-radius: 16px;
}

.refund-icon {
  width: 80px;

  height: 80px;

  border-radius: 50%;

  background: #fff;

  color: #c52828;

  font-size: 42px;

  font-weight: bold;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;
}

.refund-content h3 {
  color: #fff;

  margin-bottom: 12px;

  font-size: 28px;
}

.refund-content p {
  margin: 0;

  color: #f4d9d9;

  line-height: 1.8;
}

.refund-intro {
  margin: 35px 0;

  font-size: 17px;

  line-height: 1.9;
}

/*======================================
REFUND GRID
======================================*/

.refund-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin-top: 30px;
}

.refund-card {
  background: #171717;

  border: 1px solid #403015;

  border-radius: 16px;

  padding: 30px;
}

.refund-card-icon {
  font-size: 50px;

  margin-bottom: 18px;
}

.refund-card h3 {
  color: #d6a624;

  margin-bottom: 20px;
}

.refund-card ul {
  padding-left: 20px;

  margin: 0;
}

.refund-card li {
  margin-bottom: 12px;

  color: #d8d8d8;

  line-height: 1.7;
}

.platform-list {
  display: flex;

  gap: 15px;

  flex-wrap: wrap;

  margin-top: 20px;
}

.platform-list span {
  background: #2b2b2b;

  padding: 12px 18px;

  border-radius: 30px;

  border: 1px solid #d6a624;

  color: #fff;

  font-size: 14px;
}

/*======================================
LEGAL NOTICE
======================================*/

.legal-notice {
  margin-top: 40px;

  padding: 30px;

  background: #191919;

  border-left: 5px solid #d6a624;

  border-radius: 10px;
}

.legal-notice h3 {
  color: #d6a624;

  margin-bottom: 12px;
}

.legal-notice p {
  margin: 0;

  line-height: 1.8;
}

/*======================================
IMPORTANT BOX
======================================*/

.important-box {
  margin-top: 30px;

  padding: 25px;

  background: #231b0d;

  border: 1px solid #d6a624;

  border-radius: 12px;
}

.important-box h4 {
  color: #d6a624;

  margin-bottom: 10px;

  font-size: 22px;
}

.important-box p {
  margin: 0;

  line-height: 1.8;

  color: #f2f2f2;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .refund-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .refund-banner {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .refund-content h3 {
    font-size: 24px;
  }

  .refund-icon {
    width: 65px;

    height: 65px;

    font-size: 32px;
  }

  .platform-list {
    justify-content: center;
  }
  .refund-card-icon{
    text-align: center;
  }
}

/*======================================
SECTION DESCRIPTION
======================================*/

.section-description {
  margin: 25px 0 40px;

  line-height: 1.9;

  color: #d9d9d9;
}

/*======================================
VIRTUAL GRID
======================================*/

.virtual-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;

  margin-bottom: 45px;
}

.virtual-card {
  background: #171717;

  border: 1px solid #403015;

  border-radius: 18px;

  padding: 35px 28px;

  text-align: center;

  transition: 0.35s;
}

.virtual-card:hover {
  transform: translateY(-8px);

  border-color: #d6a624;

  box-shadow: 0 15px 35px rgba(214, 166, 36, 0.15);
}

.virtual-icon {
  font-size: 50px;

  margin-bottom: 20px;
}

.virtual-card h3 {
  color: #fff;

  margin-bottom: 15px;

  font-size: 22px;
}

.virtual-card p {
  margin: 0;

  color: #d5d5d5;

  line-height: 1.8;
}

/*======================================
OWNERSHIP BOX
======================================*/

.ownership-box {
  background: #1a1a1a;

  padding: 35px;

  border-radius: 16px;

  border-left: 5px solid #d6a624;

  margin-bottom: 45px;
}

.ownership-box h3 {
  color: #d6a624;

  margin-bottom: 15px;
}

.ownership-box p {
  margin: 0;

  line-height: 1.9;
}

/*======================================
RULE TITLE
======================================*/

.rules-title {
  margin-bottom: 25px;

  color: #d6a624;

  font-size: 28px;
}

/*======================================
RESTRICTION GRID
======================================*/

.restriction-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

  margin-bottom: 40px;
}

.restriction-item {
  background: #1c1c1c;

  border: 1px solid #403015;

  padding: 18px 20px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  gap: 12px;

  color: #ececec;

  transition: 0.3s;
}

.restriction-item:hover {
  border-color: #d6a624;

  background: #262626;
}

.restriction-item span {
  font-size: 22px;
}

/*======================================
GOLD NOTICE
======================================*/

.gold-notice {
  padding: 35px;

  background: linear-gradient(135deg, #2b2415, #17130b);

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.gold-notice h3 {
  color: #f6cb54;

  margin-bottom: 15px;
}

.gold-notice p {
  margin: 0;

  line-height: 1.9;

  color: #ececec;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .virtual-grid {
    grid-template-columns: 1fr;
  }

  .restriction-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .virtual-card {
    padding: 25px;
  }

  .ownership-box {
    padding: 25px;
  }

  .gold-notice {
    padding: 25px;
  }

  .rules-title {
    font-size: 24px;
  }
}

/*======================================
INTELLECTUAL PROPERTY
======================================*/

.ip-highlight {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 35px;

  margin: 35px 0;

  background: #191919;

  border-left: 5px solid #d6a624;

  border-radius: 16px;
}

.ip-highlight-icon {
  width: 80px;

  height: 80px;

  background: #d6a624;

  color: #111;

  font-size: 42px;

  font-weight: bold;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  flex-shrink: 0;
}

/*======================================
IP GRID
======================================*/

.ip-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 22px;

  margin: 35px 0;
}

.ip-card {
  background: #181818;

  border: 1px solid #403015;

  border-radius: 16px;

  padding: 30px 20px;

  text-align: center;

  transition: 0.35s;

  font-size: 42px;
}

.ip-card:hover {
  transform: translateY(-8px);

  border-color: #d6a624;

  box-shadow: 0 15px 30px rgba(214, 166, 36, 0.15);
}

.ip-card h4 {
  font-size: 20px;

  color: #fff;

  margin: 20px 0 12px;
}

.ip-card p {
  font-size: 15px;

  color: #d6d6d6;

  line-height: 1.7;

  margin: 0;
}

/*======================================
COPYRIGHT BOX
======================================*/

.copyright-box {
  margin-top: 40px;

  padding: 35px;

  background: #20190e;

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.copyright-box h3 {
  color: #f4c542;

  margin-bottom: 18px;
}

.copyright-box p {
  line-height: 1.9;

  margin-bottom: 15px;

  color: #f1f1f1;
}

/*======================================
WARNING
======================================*/

.protection-warning {
  margin-top: 30px;

  padding: 30px;

  background: #3a1616;

  border-left: 5px solid #ff5555;

  border-radius: 12px;
}

.protection-warning h3 {
  color: #ff9090;

  margin-bottom: 15px;
}

.protection-warning p {
  margin: 0;

  line-height: 1.8;

  color: #f6dcdc;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 1100px) {
  .ip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ip-highlight {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .ip-grid {
    grid-template-columns: 1fr;
  }

  .ip-card {
    padding: 25px;
  }

  .copyright-box {
    padding: 25px;
  }

  .protection-warning {
    padding: 22px;
  }
}

/*======================================
USER GENERATED CONTENT
======================================*/

.ugc-intro {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: #1a1a1a;

  border-left: 5px solid #d6a624;

  border-radius: 16px;
}

.ugc-icon {
  width: 75px;

  height: 75px;

  border-radius: 50%;

  background: #d6a624;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  flex-shrink: 0;
}

/*======================================
UGC GRID
======================================*/

.ugc-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.ugc-card {
  padding: 30px;

  border-radius: 16px;

  border: 1px solid #403015;

  background: #181818;

  transition: 0.35s;
}

.ugc-card:hover {
  transform: translateY(-8px);
}

.ugc-card.success {
  border-left: 5px solid #2ecc71;
}

.ugc-card.danger {
  border-left: 5px solid #e74c3c;
}

.ugc-card-icon {
  font-size: 45px;

  margin-bottom: 20px;
}

.ugc-card h4 {
  color: #fff;

  margin-bottom: 20px;

  font-size: 22px;
}

.ugc-card ul {
  padding-left: 20px;

  margin: 0;
}

.ugc-card li {
  margin-bottom: 12px;

  line-height: 1.8;

  color: #ddd;
}

/*======================================
LICENSE BOX
======================================*/

.license-box {
  margin-top: 40px;

  padding: 35px;

  background: #20190e;

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.license-box h3 {
  color: #f4c542;

  margin-bottom: 15px;
}

.license-box p {
  line-height: 1.9;

  margin: 0;
}

/*======================================
MODERATION BOX
======================================*/

.moderation-box {
  margin-top: 30px;

  padding: 30px;

  background: #181818;

  border-left: 5px solid #3498db;

  border-radius: 14px;
}

.moderation-box h3 {
  color: #5dade2;

  margin-bottom: 15px;
}

.moderation-box p {
  margin: 0;

  line-height: 1.8;
}

/*======================================
WARNING BOX
======================================*/

.warning-box {
  margin-top: 30px;

  padding: 30px;

  background: #3b1717;

  border-left: 5px solid #ff4d4d;

  border-radius: 14px;
}

.warning-box h3 {
  color: #ff8d8d;

  margin-bottom: 15px;
}

.warning-box p {
  margin: 0;

  line-height: 1.8;

  color: #f5dada;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .ugc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ugc-intro {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .ugc-card {
    padding: 25px;
  }

  .license-box {
    padding: 25px;
  }

  .moderation-box {
    padding: 22px;
  }

  .warning-box {
    padding: 22px;
  }
}

/*======================================
SECTION 11 - UPDATES & CHANGES
======================================*/

.update-banner {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: #1b1b1b;

  border-left: 5px solid #d6a624;

  border-radius: 16px;
}

.update-icon {
  width: 75px;

  height: 75px;

  border-radius: 50%;

  background: #d6a624;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  flex-shrink: 0;
}

/*======================================
UPDATE GRID
======================================*/

.update-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.update-card {
  background: #181818;

  padding: 30px;

  border-radius: 16px;

  border: 1px solid rgba(214, 166, 36, 0.35);

  transition: 0.35s;
}

.update-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 15px 35px rgba(214, 166, 36, 0.18);
}

.update-card-icon {
  font-size: 42px;

  margin-bottom: 18px;
}

.update-card h4 {
  color: #f4c542;

  font-size: 22px;

  margin-bottom: 15px;
}

.update-card p {
  color: #d6d6d6;

  line-height: 1.8;

  margin: 0;
}

/*======================================
TIMELINE BOX
======================================*/

.timeline-box {
  margin-top: 40px;

  padding: 35px;

  background: #20190e;

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.timeline-box h3 {
  color: #f4c542;

  margin-bottom: 15px;
}

.timeline-box p {
  margin: 0;

  line-height: 1.9;
}

/*======================================
NOTICE BOX
======================================*/

.notice-box {
  margin-top: 30px;

  padding: 30px;

  background: #1b1b1b;

  border-left: 5px solid #4aa3ff;

  border-radius: 14px;
}

.notice-box h3 {
  color: #69b6ff;

  margin-bottom: 15px;
}

.notice-box p {
  margin: 0;

  line-height: 1.8;

  color: #ddd;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .update-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .update-banner {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .update-card {
    padding: 25px;
  }

  .timeline-box {
    padding: 25px;
  }

  .notice-box {
    padding: 22px;
  }
}

/*======================================
SECTION 12 - SERVICE AVAILABILITY
======================================*/

.availability-banner {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: #1a1a1a;

  border-left: 5px solid #d6a624;

  border-radius: 16px;
}

.availability-icon {
  width: 75px;

  height: 75px;

  background: #d6a624;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  flex-shrink: 0;
}

/*======================================
GRID
======================================*/

.availability-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.availability-card {
  background: #181818;

  padding: 30px;

  border-radius: 16px;

  border: 1px solid rgba(214, 166, 36, 0.25);

  transition: 0.35s;
}

.availability-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 15px 35px rgba(214, 166, 36, 0.15);
}

.availability-card-icon {
  font-size: 42px;

  margin-bottom: 20px;
}

.availability-card h4 {
  color: #f4c542;

  margin-bottom: 15px;

  font-size: 22px;
}

.availability-card p {
  line-height: 1.8;

  color: #ddd;

  margin: 0;
}

/*======================================
INFO BOXES
======================================*/

.guarantee-box {
  margin-top: 40px;

  padding: 35px;

  background: #20190e;

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.guarantee-box h3 {
  color: #f4c542;

  margin-bottom: 15px;
}

.guarantee-box p {
  margin: 0;

  line-height: 1.9;
}

.maintenance-box {
  margin-top: 30px;

  padding: 30px;

  background: #1a1a1a;

  border-left: 5px solid #3498db;

  border-radius: 14px;
}

.maintenance-box h3 {
  color: #5dade2;

  margin-bottom: 15px;
}

.maintenance-box p {
  margin: 0;

  line-height: 1.8;
}

.important-box {
  margin-top: 30px;

  padding: 30px;

  background: #3a1717;

  border-left: 5px solid #ff4d4d;

  border-radius: 14px;
}

.important-box h3 {
  color: #ff8d8d;

  margin-bottom: 15px;
}

.important-box p {
  margin: 0;

  line-height: 1.8;

  color: #f6dddd;
}

/*======================================
RESPONSIVE
======================================*/

@media (max-width: 991px) {
  .availability-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .availability-banner {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .availability-card {
    padding: 24px;
  }

  .guarantee-box {
    padding: 25px;
  }

  .maintenance-box,
  .important-box {
    padding: 22px;
  }
}

/*======================================
SECTION 13
ACCOUNT SUSPENSION & TERMINATION
======================================*/

.suspension-banner {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: #1a1a1a;

  border-left: 5px solid #d6a624;

  border-radius: 16px;
}

.suspension-icon {
  width: 75px;

  height: 75px;

  border-radius: 50%;

  background: #d6a624;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  flex-shrink: 0;
}

/* Grid */

.suspension-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.suspension-card {
  background: #181818;

  border: 1px solid rgba(214, 166, 36, 0.3);

  padding: 30px;

  border-radius: 16px;

  transition: 0.35s;
}

.suspension-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 18px 35px rgba(214, 166, 36, 0.15);
}

.suspension-card-icon {
  font-size: 42px;

  margin-bottom: 18px;
}

.suspension-card h4 {
  font-size: 22px;

  color: #f4c542;

  margin-bottom: 15px;
}

.suspension-card p {
  margin: 0;

  line-height: 1.8;

  color: #ddd;
}

/* Timeline */

.penalty-timeline {
  margin: 45px 0;

  display: flex;

  flex-direction: column;

  gap: 25px;
}

.penalty-item {
  display: flex;

  gap: 20px;

  align-items: flex-start;

  background: #181818;

  padding: 25px;

  border-radius: 14px;

  border-left: 4px solid #d6a624;
}

.penalty-number {
  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #d6a624;

  color: #111;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  flex-shrink: 0;
}

.penalty-item h4 {
  margin-bottom: 10px;

  color: #fff;
}

/* Termination Box */

.termination-box {
  margin-top: 40px;

  padding: 35px;

  background: #20190e;

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.termination-box h3 {
  color: #f4c542;

  margin-bottom: 18px;
}

.termination-box ul {
  padding-left: 20px;

  margin: 0;
}

.termination-box li {
  margin-bottom: 12px;

  line-height: 1.8;
}

/* Appeal */

.appeal-box {
  margin-top: 30px;

  padding: 30px;

  background: #1a1a1a;

  border-left: 5px solid #3498db;

  border-radius: 14px;
}

.appeal-box h3 {
  color: #5dade2;

  margin-bottom: 15px;
}

.appeal-box p {
  margin: 0;

  line-height: 1.8;
}

/* Responsive */

@media (max-width: 991px) {
  .suspension-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .suspension-banner {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .suspension-card {
    padding: 24px;
  }

  .penalty-item {
    flex-direction: column;

    align-items: center;

    text-align: center;
  }

  .penalty-number {
    margin-bottom: 10px;
  }

  .termination-box {
    padding: 25px;
  }

  .appeal-box {
    padding: 22px;
  }
}

/*======================================
SECTION 14
DISCLAIMER OF WARRANTIES
======================================*/

.disclaimer-banner {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: #1a1a1a;

  border-left: 5px solid #d6a624;

  border-radius: 16px;
}

.disclaimer-icon {
  width: 75px;

  height: 75px;

  background: #d6a624;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 34px;

  flex-shrink: 0;
}

/* Grid */

.disclaimer-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.disclaimer-card {
  background: #181818;

  padding: 30px;

  border-radius: 16px;

  border: 1px solid rgba(214, 166, 36, 0.3);

  transition: 0.35s;
}

.disclaimer-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 15px 30px rgba(214, 166, 36, 0.15);
}

.disclaimer-card-icon {
  font-size: 42px;

  margin-bottom: 18px;
}

.disclaimer-card h4 {
  color: #f4c542;

  margin-bottom: 15px;

  font-size: 22px;
}

.disclaimer-card p {
  margin: 0;

  line-height: 1.8;

  color: #ddd;
}

/* Warranty Box */

.warranty-box {
  margin-top: 40px;

  padding: 35px;

  background: #20190e;

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.warranty-box h3 {
  color: #f4c542;

  margin-bottom: 18px;
}

.warranty-box ul {
  padding-left: 20px;

  margin: 0;
}

.warranty-box li {
  margin-bottom: 12px;

  line-height: 1.8;
}

/* Risk Box */

.risk-box {
  margin-top: 30px;

  padding: 30px;

  background: #1a1a1a;

  border-left: 5px solid #3498db;

  border-radius: 14px;
}

.risk-box h3 {
  color: #5dade2;

  margin-bottom: 15px;
}

.risk-box p {
  margin: 0;

  line-height: 1.8;
}

/* Notice */

.notice-box-red {
  margin-top: 30px;

  padding: 30px;

  background: #3b1717;

  border-left: 5px solid #ff4d4d;

  border-radius: 14px;
}

.notice-box-red h3 {
  color: #ff8d8d;

  margin-bottom: 15px;
}

.notice-box-red p {
  margin: 0;

  line-height: 1.8;

  color: #f8dcdc;
}

/* Responsive */

@media (max-width: 991px) {
  .disclaimer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .disclaimer-banner {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .disclaimer-card {
    padding: 24px;
  }

  .warranty-box {
    padding: 25px;
  }

  .risk-box,
  .notice-box-red {
    padding: 22px;
  }
}

/*======================================
SECTION 15
LIMITATION OF LIABILITY
======================================*/

.liability-banner {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: #1a1a1a;

  border-left: 5px solid #d6a624;

  border-radius: 16px;
}

.liability-icon {
  width: 75px;

  height: 75px;

  border-radius: 50%;

  background: #d6a624;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 34px;

  flex-shrink: 0;
}

/*==============================
GRID
==============================*/

.liability-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.liability-card {
  background: #181818;

  padding: 30px;

  border-radius: 16px;

  border: 1px solid rgba(214, 166, 36, 0.25);

  transition: 0.35s;
}

.liability-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 15px 35px rgba(214, 166, 36, 0.15);
}

.liability-card-icon {
  font-size: 42px;

  margin-bottom: 18px;
}

.liability-card h4 {
  color: #f4c542;

  margin-bottom: 15px;

  font-size: 22px;
}

.liability-card p {
  margin: 0;

  line-height: 1.8;

  color: #ddd;
}

/*==============================
MAX LIABILITY
==============================*/

.liability-limit-box {
  margin-top: 40px;

  padding: 35px;

  background: #20190e;

  border: 1px solid #d6a624;

  border-radius: 16px;
}

.liability-limit-box h3 {
  color: #f4c542;

  margin-bottom: 15px;
}

.liability-limit-box p {
  line-height: 1.9;

  margin: 0;
}

/*==============================
EXCLUDED DAMAGES
==============================*/

.indirect-damages-box {
  margin-top: 30px;

  padding: 30px;

  background: #181818;

  border-left: 5px solid #3498db;

  border-radius: 14px;
}

.indirect-damages-box h3 {
  color: #5dade2;

  margin-bottom: 18px;
}

.indirect-damages-box ul {
  margin: 0;

  padding-left: 20px;
}

.indirect-damages-box li {
  margin-bottom: 12px;

  line-height: 1.8;
}

/*==============================
LEGAL BOX
==============================*/

.legal-box {
  margin-top: 30px;

  padding: 30px;

  background: #3b1717;

  border-left: 5px solid #ff4d4d;

  border-radius: 14px;
}

.legal-box h3 {
  color: #ff8d8d;

  margin-bottom: 15px;
}

.legal-box p {
  margin: 0;

  line-height: 1.8;

  color: #f6dede;
}

/*==============================
RESPONSIVE
==============================*/

@media (max-width: 991px) {
  .liability-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .liability-banner {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .liability-card {
    padding: 24px;
  }

  .liability-limit-box {
    padding: 25px;
  }

  .indirect-damages-box,
  .legal-box {
    padding: 22px;
  }
}

/*======================================
SECTION 16
PRIVACY
======================================*/

.privacy-banner {
  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  margin: 35px 0;

  background: #18231d;

  border-left: 5px solid #3fbf7f;

  border-radius: 16px;
}

.privacy-icon {
  width: 75px;

  height: 75px;

  background: #3fbf7f;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 34px;

  flex-shrink: 0;
}

/*==============================
GRID
==============================*/

.privacy-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  margin: 40px 0;
}

.privacy-card {
  background: #181818;

  padding: 30px;

  border-radius: 16px;

  border: 1px solid rgba(63, 191, 127, 0.25);

  transition: 0.35s;
}

.privacy-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 15px 35px rgba(63, 191, 127, 0.15);
}

.privacy-card-icon {
  font-size: 40px;

  margin-bottom: 18px;
}

.privacy-card h4 {
  color: #59d996;

  margin-bottom: 15px;

  font-size: 22px;
}

.privacy-card p {
  margin: 0;

  line-height: 1.8;

  color: #ddd;
}

/*==============================
RIGHTS BOX
==============================*/

.privacy-rights-box {
  margin-top: 40px;

  padding: 35px;

  background: #1d231d;

  border: 1px solid #3fbf7f;

  border-radius: 16px;
}

.privacy-rights-box h3 {
  color: #59d996;

  margin-bottom: 18px;
}

.privacy-rights-box ul {
  margin: 0;

  padding-left: 22px;
}

.privacy-rights-box li {
  margin-bottom: 12px;

  line-height: 1.8;
}

/*==============================
NOTICE
==============================*/

.privacy-notice {
  margin-top: 30px;

  padding: 30px;

  background: #181818;

  border-left: 5px solid #3498db;

  border-radius: 14px;
}

.privacy-notice h3 {
  color: #6cb8ff;

  margin-bottom: 15px;
}

.privacy-notice p {
  margin: 0;

  line-height: 1.8;
}

/*==============================
WARNING
==============================*/

.privacy-warning {
  margin-top: 30px;

  padding: 25px;

  background: #3b1f14;

  border-left: 5px solid #ff8a3d;

  border-radius: 14px;

  line-height: 1.9;

  color: #ffe4cf;
}

/*==============================
RESPONSIVE
==============================*/

@media (max-width: 991px) {
  .privacy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .privacy-banner {
    flex-direction: column;

    text-align: center;

    padding: 25px;
  }

  .privacy-card {
    padding: 24px;
  }

  .privacy-rights-box,
  .privacy-notice,
  .privacy-warning {
    padding: 22px;
  }
}
/*======================================
SECTION 17
GOVERNING LAW
======================================*/

.law-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px;
  margin: 35px 0;
  background: #1b2130;
  border-left: 5px solid #4c84ff;
  border-radius: 16px;
}

.law-icon {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #4c84ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
}

/*=========================
GRID
=========================*/

.law-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.law-card {
  background: #181818;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(76, 132, 255, 0.25);
  transition: 0.35s;
}

.law-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(76, 132, 255, 0.15);
}

.law-card-icon {
  font-size: 40px;
  margin-bottom: 18px;
}

.law-card h4 {
  color: #71a2ff;
  margin-bottom: 15px;
  font-size: 22px;
}

.law-card p {
  margin: 0;
  line-height: 1.8;
  color: #ddd;
}

/*=========================
JURISDICTION
=========================*/

.jurisdiction-box {
  margin-top: 35px;
  padding: 35px;
  background: #202534;
  border-left: 5px solid #4c84ff;
  border-radius: 16px;
}

.jurisdiction-box h3 {
  color: #71a2ff;
  margin-bottom: 15px;
}

.jurisdiction-box p {
  line-height: 1.9;
}

/*=========================
NOTICE
=========================*/

.law-notice {
  margin-top: 30px;
  padding: 30px;
  background: #1a1a1a;
  border-left: 5px solid #27ae60;
  border-radius: 16px;
}

.law-notice h3 {
  color: #45d483;
  margin-bottom: 15px;
}

.law-notice p {
  margin: 0;
  line-height: 1.8;
}

/*=========================
WARNING
=========================*/

.law-warning {
  margin-top: 30px;
  padding: 25px;
  background: #3a2416;
  border-left: 5px solid #f39c12;
  border-radius: 16px;
  color: #ffe2c2;
  line-height: 1.9;
}

/*=========================
RESPONSIVE
=========================*/

@media (max-width: 991px) {
  .law-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .law-banner {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .law-card {
    padding: 24px;
  }

  .jurisdiction-box,
  .law-notice,
  .law-warning {
    padding: 22px;
  }
}

/*======================================
SECTION 18
CHANGES TO TERMS
======================================*/

.changes-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px;
  margin: 35px 0;
  background: #1d2333;
  border-left: 5px solid #9b59b6;
  border-radius: 16px;
}

.changes-icon {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #9b59b6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
}

/*==============================
GRID
==============================*/

.changes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.changes-card {
  background: #181818;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(155, 89, 182, 0.3);
  transition: 0.35s;
}

.changes-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(155, 89, 182, 0.2);
}

.changes-card-icon {
  font-size: 40px;
  margin-bottom: 18px;
}

.changes-card h4 {
  color: #c18ee4;
  margin-bottom: 15px;
  font-size: 22px;
}

.changes-card p {
  margin: 0;
  line-height: 1.8;
  color: #ddd;
}

/*==============================
TIMELINE
==============================*/

.update-timeline {
  margin-top: 40px;
  padding: 35px;
  background: #1d1d1d;
  border-radius: 16px;
  border-left: 5px solid #9b59b6;
}

.update-timeline h3 {
  margin-bottom: 25px;
  color: #c18ee4;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item span {
  width: 40px;
  height: 40px;
  background: #9b59b6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}

.timeline-item p {
  margin: 8px 0 0;
  line-height: 1.8;
}

/*==============================
NOTICE
==============================*/

.changes-notice {
  margin-top: 35px;
  padding: 30px;
  background: #20252d;
  border-left: 5px solid #3498db;
  border-radius: 16px;
}

.changes-notice h3 {
  color: #6cb8ff;
  margin-bottom: 15px;
}

.changes-notice p {
  margin: 0;
  line-height: 1.8;
}

/*==============================
WARNING
==============================*/

.changes-warning {
  margin-top: 30px;
  padding: 25px;
  background: #3a2218;
  border-left: 5px solid #ff9800;
  border-radius: 16px;
  line-height: 1.9;
  color: #ffe0c0;
}

/*==============================
RESPONSIVE
==============================*/

@media (max-width: 991px) {
  .changes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .changes-banner {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .changes-card {
    padding: 24px;
  }

  .update-timeline,
  .changes-notice,
  .changes-warning {
    padding: 22px;
  }

  .timeline-item {
    align-items: flex-start;
  }
}

/*======================================
SECTION 19
CONTACT INFORMATION
======================================*/

.contact-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px;
  margin: 35px 0;
  background: #1c2228;
  border-left: 5px solid #0aa7ff;
  border-radius: 16px;
}

.contact-icon {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #0aa7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
}

/*==========================
GRID
==========================*/

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.contact-card {
  background: #181818;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(10, 167, 255, 0.25);
  transition: 0.35s;
}

.contact-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 15px 35px rgba(10, 167, 255, 0.15);
}

.contact-card-icon {
  font-size: 40px;
  margin-bottom: 18px;
}

.contact-card h4 {
  color: #56c3ff;
  margin-bottom: 15px;
  font-size: 22px;
}

.contact-card p {
  margin: 0;
  line-height: 1.8;
  color: #ddd;
}

.contact-card a {
  color: #56c3ff;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

/*==========================
SUPPORT
==========================*/

.support-box {
  margin-top: 35px;
  padding: 35px;
  background: #1f2327;
  border-left: 5px solid #27ae60;
  border-radius: 16px;
}

.support-box h3 {
  color: #58d68d;
  margin-bottom: 15px;
}

.support-box p {
  margin-bottom: 15px;
  line-height: 1.8;
}

/*==========================
COPYRIGHT
==========================*/

.copyright-box {
  margin-top: 35px;
  padding: 35px;
  background: #1d1d1d;
  border-left: 5px solid #d4af37;
  border-radius: 16px;
}

.copyright-box h3 {
  color: #f4d03f;
  margin-bottom: 18px;
}

.copyright-box p {
  margin-bottom: 18px;
  line-height: 1.9;
}

/*==========================
WARNING
==========================*/

.copyright-warning {
  margin-top: 30px;
  padding: 25px;
  background: #3a1d1d;
  border-left: 5px solid #ff4d4d;
  border-radius: 16px;
  line-height: 1.9;
  color: #ffd6d6;
}

/*==========================
RESPONSIVE
==========================*/

@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contact-banner {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .contact-card {
    padding: 24px;
  }

  .support-box,
  .copyright-box,
  .copyright-warning {
    padding: 22px;
  }
}

/* policy card style */
.policy-card {
  background: #161616;
  padding: 40px;
  border-radius: 18px;
  margin: 40px 0;
  border: 1px solid rgba(212, 175, 55, 0.15);
}

.card-number {
  display: inline-block;
  background: #d4af37;
  color: #111;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
}

.section-description {
  color: #cfcfcf;
  line-height: 1.8;
  margin: 20px 0;
}

.policy-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px;
  border-radius: 15px;
  margin-top: 25px;
}

.policy-banner.blue {
  background: #1b2435;
}
.policy-banner.purple {
  background: #2d2141;
}

.policy-icon {
  width: 70px;
  height: 70px;
  background: #d4af37;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}

.rights-grid,
.contact-grid,
.purchase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 30px;
}

.rights-card,
.contact-card,
.purchase-card {
  background: #202020;
  padding: 25px;
  border-radius: 15px;
  transition: 0.3s;
}

.rights-card:hover,
.contact-card:hover,
.purchase-card:hover {
  transform: translateY(-6px);
  border: 1px solid #d4af37;
}

.purchase-card.danger {
  border-left: 5px solid #ff5252;
}

.purchase-card.warning {
  border-left: 5px solid #ff9800;
}

.purchase-card ul {
  padding-left: 20px;
}

.purchase-card li {
  margin-bottom: 10px;
}

.notice-box {
  margin-top: 25px;
  padding: 20px;
  background: #2f2614;
  border-left: 4px solid #d4af37;
  border-radius: 10px;
}

.terms-summary {
  margin: 80px 0;
  text-align: center;
}

.summary-box {
  max-width: 800px;
  margin: auto;
  background: #1c1c1c;
  padding: 40px;
  border-radius: 18px;
}

.summary-box ul {
  list-style: none;
  padding: 0;
  text-align: start;
}

.summary-box li {
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 18px;
}

.summary-box li:last-child {
  border-bottom: none;
}

.thank-you {
  margin-top: 50px;
}

.thank-you h2 {
  color: #d4af37;
  font-size: 42px;
  margin: 20px 0;
}

@media (max-width: 768px) {
  .rights-grid,
  .contact-grid,
  .purchase-grid {
    grid-template-columns: 1fr;
  }

  .policy-banner {
    flex-direction: column;
    text-align: center;
  }

  .policy-card {
    padding: 25px;
  }

  .summary-box {
    padding: 25px;
  }

  .thank-you h2 {
    font-size: 30px;
  }
}