/* =========================================================
   GLOBAL COLOR VARIABLES
========================================================= */

:root {
  /* Brand Colors */
  --color-primary: #111111;
  --color-primary-dark: #333333;

  /* Background Colors */
  --color-background: #ffffff;
  --color-background-light: #f7f7f7;
  --color-background-cream: #f2f2f2;
  --color-background-gray: #e2e2e2;
  --color-background-dark: #111111;
  --color-background-dark-grey: #333333;
  --color-background-dark-alt: #1d1d1d;

  /* Text Colors */
  --color-text: #111111;
  --color-text-dark: #222222;
  --color-text-gray: #777777;
  --color-text-light: #999999;
  --color-text-white: #ffffff;

  /* Border Colors */
  --color-border: #e7e7e7;
  --color-border-dark: #444444;

  /* Fonts */
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Inter", sans-serif;

  /* Layout */
  --section-padding: 110px;
}

[data-aos] {
  max-width: 100%;
}

[data-aos="fade-left"],
[data-aos="fade-right"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);

  color: var(--color-text);

  background: var(--color-background);
}

html,
body {
  width: 100%;
  overflow-x: clip;
}

img {
  max-width: 100%;

  display: block;
}

a {
  text-decoration: none;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

.visually-hidden-heading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* =========================================================
   LOADING SCREEN
   ========================================================= */

#loading-screen {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  background: #f5f5f5;

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

  overflow: hidden;

  z-index: 999999;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

/* =========================================================
   FLOATING ICON CONTAINER
   ========================================================= */

.loading-floating-icons {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;

  z-index: 1;
}

/* =========================================================
   FLOATING ICONS
   ========================================================= */

.loading-icon {
  position: absolute;

  display: block;

  font-size: 28px;

  color: #333;

  opacity: 0.5;

  will-change: transform;

  animation:
    loadingFloat 6s ease-in-out infinite,
    loadingDrift 10s ease-in-out infinite;
}

/* =========================================================
   ICON POSITIONS
   ========================================================= */

.loading-icon-1 {
  left: 9%;
  top: 18%;

  font-size: 32px;

  animation-delay: -1s;
}

.loading-icon-2 {
  left: 23%;
  top: 70%;

  font-size: 27px;

  animation-delay: -3s;
}

.loading-icon-3 {
  left: 12%;
  top: 48%;

  font-size: 25px;

  animation-delay: -5s;
}

.loading-icon-4 {
  left: 78%;
  top: 20%;

  font-size: 29px;

  animation-delay: -2s;
}

.loading-icon-5 {
  left: 87%;
  top: 55%;

  font-size: 30px;

  animation-delay: -4s;
}

.loading-icon-6 {
  left: 70%;
  top: 76%;

  font-size: 27px;

  animation-delay: -6s;
}

.loading-icon-7 {
  left: 83%;
  top: 39%;

  font-size: 32px;

  animation-delay: -1.5s;
}

.loading-icon-8 {
  left: 31%;
  top: 27%;

  font-size: 25px;

  animation-delay: -4.5s;
}

/* =========================================================
   FLOATING MOTION
   ========================================================= */

@keyframes loadingFloat {
  0% {
    margin-top: 0;
  }

  50% {
    margin-top: -14px;
  }

  100% {
    margin-top: 0;
  }
}

/* =========================================================
   SLIGHT SIDE-TO-SIDE DRIFT
   ========================================================= */

@keyframes loadingDrift {
  0% {
    margin-left: 0;
    rotate: -2deg;
  }

  50% {
    margin-left: 10px;
    rotate: 3deg;
  }

  100% {
    margin-left: 0;
    rotate: -2deg;
  }
}

/* =========================================================
   CENTER BOOK
   ========================================================= */

.loading-book {
  position: relative;

  z-index: 10;

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

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

@media (max-width: 576px) {
  .loading-icon {
    font-size: 22px;
    opacity: 0.08;
  }

  .loading-icon-1 {
    left: 7%;
    top: 15%;
  }

  .loading-icon-2 {
    left: 14%;
    top: 75%;
  }

  .loading-icon-3 {
    left: 5%;
    top: 45%;
  }

  .loading-icon-4 {
    left: 82%;
    top: 17%;
  }

  .loading-icon-5 {
    left: 88%;
    top: 53%;
  }

  .loading-icon-6 {
    left: 73%;
    top: 77%;
  }

  .loading-icon-7 {
    left: 85%;
    top: 37%;
  }

  .loading-icon-8 {
    left: 28%;
    top: 23%;
  }
}

/* =========================================================
   BOOK LOADER
   Based on the original CodePen animation
   ========================================================= */

.book {
  --book-color: #333;
  --book-duration: 6.8s;

  width: 32px;
  height: 12px;

  position: relative;

  margin: 32px 0 0 0;

  zoom: 1.2;
}

/* =========================================================
   BOOK INNER / SPINE
   ========================================================= */

.book .inner {
  width: 32px;
  height: 12px;

  position: relative;

  transform-origin: 2px 2px;

  transform: rotateZ(-90deg);

  animation: book var(--book-duration) ease infinite;
}

/* =========================================================
   LEFT + RIGHT COVERS
   ========================================================= */

.book .inner .left,
.book .inner .right {
  width: 60px;
  height: 4px;

  top: 0;

  position: absolute;

  border-radius: 2px;

  background: var(--book-color);
}

.book .inner .left::before,
.book .inner .right::before {
  content: "";

  width: 48px;
  height: 4px;

  border-radius: 2px;

  background: inherit;

  position: absolute;

  top: -10px;
  left: 6px;
}

/* =========================================================
   LEFT COVER
   ========================================================= */

.book .inner .left {
  right: 28px;

  transform-origin: 58px 2px;

  transform: rotateZ(90deg);

  animation: left var(--book-duration) ease infinite;
}

/* =========================================================
   RIGHT COVER
   ========================================================= */

.book .inner .right {
  left: 28px;

  transform-origin: 2px 2px;

  transform: rotateZ(-90deg);

  animation: right var(--book-duration) ease infinite;
}

/* =========================================================
   CENTER / SPINE
   ========================================================= */

.book .inner .middle {
  width: 32px;
  height: 12px;

  border: 4px solid var(--book-color);

  border-top: 0;

  border-radius: 0 0 9px 9px;

  transform: translateY(2px);
}

/* =========================================================
   PAGES
   ========================================================= */

.book ul {
  margin: 0;
  padding: 0;

  list-style: none;

  position: absolute;

  left: 50%;
  top: 0;
}

.book ul li {
  width: 48px;
  height: 4px;

  right: 0;
  top: -10px;

  position: absolute;

  border-radius: 2px;

  background: var(--book-color);

  transform-origin: 100% 2px;

  transform: rotateZ(0deg) translateX(-18px);

  animation-duration: var(--book-duration);
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

/* =========================================================
   PAGE 1
   ========================================================= */

.book ul li:nth-child(1) {
  animation-name: page-0;
}

/* =========================================================
   PAGE 2
   ========================================================= */

.book ul li:nth-child(2) {
  animation-name: page-1;
}

/* =========================================================
   PAGE 3
   ========================================================= */

.book ul li:nth-child(3) {
  animation-name: page-2;
}

/* =========================================================
   PAGE 4
   ========================================================= */

.book ul li:nth-child(4) {
  animation-name: page-3;
}

/* =========================================================
   PAGE 5
   ========================================================= */

.book ul li:nth-child(5) {
  animation-name: page-4;
}

/* =========================================================
   PAGE 6
   ========================================================= */

.book ul li:nth-child(6) {
  animation-name: page-5;
}

/* =========================================================
   PAGE 7
   ========================================================= */

.book ul li:nth-child(7) {
  animation-name: page-6;
}

/* =========================================================
   PAGE 8
   ========================================================= */

.book ul li:nth-child(8) {
  animation-name: page-7;
}

/* =========================================================
   PAGE 9
   ========================================================= */

.book ul li:nth-child(9) {
  animation-name: page-8;
}

/* =========================================================
   PAGE 10
   ========================================================= */

.book ul li:nth-child(10) {
  animation-name: page-9;
}

/* =========================================================
   PAGE 11
   ========================================================= */

.book ul li:nth-child(11) {
  animation-name: page-10;
}

/* =========================================================
   PAGE 12
   ========================================================= */

.book ul li:nth-child(12) {
  animation-name: page-11;
}

/* =========================================================
   PAGE 13
   ========================================================= */

.book ul li:nth-child(13) {
  animation-name: page-12;
}

/* =========================================================
   PAGE 14
   ========================================================= */

.book ul li:nth-child(14) {
  animation-name: page-13;
}

/* =========================================================
   PAGE 15
   ========================================================= */

.book ul li:nth-child(15) {
  animation-name: page-14;
}

/* =========================================================
   PAGE 16
   ========================================================= */

.book ul li:nth-child(16) {
  animation-name: page-15;
}

/* =========================================================
   PAGE 17
   ========================================================= */

.book ul li:nth-child(17) {
  animation-name: page-16;
}

/* =========================================================
   PAGE 18
   ========================================================= */

.book ul li:nth-child(18) {
  animation-name: page-17;
}

/* =========================================================
   PAGE ANIMATIONS
   ========================================================= */

@keyframes page-0 {
  4% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  13%,
  54% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  63% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-1 {
  5.86% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  14.74%,
  55.86% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  64.74% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-2 {
  7.72% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  16.48%,
  57.72% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  66.48% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-3 {
  9.58% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  18.22%,
  59.58% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  68.22% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-4 {
  11.44% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  19.96%,
  61.44% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  69.96% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-5 {
  13.3% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  21.7%,
  63.3% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  71.7% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-6 {
  15.16% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  23.44%,
  65.16% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  73.44% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-7 {
  17.02% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  25.18%,
  67.02% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  75.18% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-8 {
  18.88% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  26.92%,
  68.88% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  76.92% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-9 {
  20.74% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  28.66%,
  70.74% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  78.66% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-10 {
  22.6% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  30.4%,
  72.6% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  80.4% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-11 {
  24.46% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  32.14%,
  74.46% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  82.14% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-12 {
  26.32% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  33.88%,
  76.32% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  83.88% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-13 {
  28.18% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  35.62%,
  78.18% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  85.62% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-14 {
  30.04% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  37.36%,
  80.04% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  87.36% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-15 {
  31.9% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  39.1%,
  81.9% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  89.1% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-16 {
  33.76% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  40.84%,
  83.76% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  90.84% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-17 {
  35.62% {
    transform: rotateZ(0deg) translateX(-18px);
  }

  42.58%,
  85.62% {
    transform: rotateZ(180deg) translateX(-18px);
  }

  92.58% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

/* =========================================================
   LEFT COVER
   ========================================================= */

@keyframes left {
  4% {
    transform: rotateZ(90deg);
  }

  10%,
  40% {
    transform: rotateZ(0deg);
  }

  46%,
  54% {
    transform: rotateZ(90deg);
  }

  60%,
  90% {
    transform: rotateZ(0deg);
  }

  96% {
    transform: rotateZ(90deg);
  }
}

/* =========================================================
   RIGHT COVER
   ========================================================= */

@keyframes right {
  4% {
    transform: rotateZ(-90deg);
  }

  10%,
  40% {
    transform: rotateZ(0deg);
  }

  46%,
  54% {
    transform: rotateZ(-90deg);
  }

  60%,
  90% {
    transform: rotateZ(0deg);
  }

  96% {
    transform: rotateZ(-90deg);
  }
}

/* =========================================================
   SPINE
   ========================================================= */

@keyframes book {
  4% {
    transform: rotateZ(-90deg);
  }

  10%,
  40% {
    transform: rotateZ(0deg);
    transform-origin: 2px 2px;
  }

  40.01%,
  59.99% {
    transform-origin: 30px 2px;
  }

  46%,
  54% {
    transform: rotateZ(90deg);
  }

  60%,
  90% {
    transform: rotateZ(0deg);
    transform-origin: 2px 2px;
  }

  96% {
    transform: rotateZ(-90deg);
  }
}

/* =========================================================
   MOBILE — EVEN SMALLER
   ========================================================= */

@media (max-width: 576px) {
  .book {
    transform: scale(0.6);
  }
}

.section-padding {
  padding: var(--section-padding) 0;
}

.section-label {
  font-size: 13px;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(2.6rem, 5vw, 4.5rem);

  line-height: 1.2;

  font-weight: 500;
}

.section-description {
  text-align: justify;
  text-justify: inter-word;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn-main {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  background: var(--color-primary);

  color: var(--color-text-white);

  padding: 15px 28px;

  border-radius: 0;

  transition: all 0.3s ease;

  font-size: 13px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.invert {
  background: var(--color-background-light) !important;

  color: var(--color-text) !important;
}

.btn-main:hover {
  background: var(--color-primary-dark);

  color: var(--color-text-white);

  transform: translateY(-3px);
}

.btn-outline-main {
  border: 1px solid var(--color-text-white);

  color: var(--color-text-white);

  padding: 14px 28px;

  transition: all 0.3s ease;

  font-size: 13px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.btn-outline-main:hover {
  background: var(--color-text);

  color: var(--color-text-white);
}

/* =========================================================
   SCAM ALERT
========================================================= */

.scam-alert {
  background: var(--color-background-dark-grey);

  color: var(--color-text-white);

  padding: 13px 20px;

  font-size: 12px;

  line-height: 1.6;

  text-align: center;
}

.scam-alert a {
  color: var(--color-text-white);

  font-weight: 600;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar {
  background: var(--color-background-gray);
  height: 88px;
  padding: 0;
  transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}

.navbar-brand,
.navbar-nav {
  transition: transform 0.3s ease;
}

.navbar-nav {
  display: flex;
  align-items: center;
}

.navbar.scrolled .navbar-brand {
  transform: scale(0.85);
}

.navbar.scrolled .navbar-nav {
  transform: scale(0.95);
}

.navbar-brand {
  display: flex;

  align-items: center;

  gap: 10px;
}

/* =========================================================
   NAVBAR CTA BUTTON
========================================================= */

.nav-cta {
  display: inline-flex;

  align-items: center;

  justify-content: center;
  gap: 10px;

  padding: 12px 20px;

  background-color: var(--color-primary);

  color: var(--color-text-white);

  font-size: 12px;

  letter-spacing: 1px;

  text-transform: uppercase;

  transition: all 0.3s ease;
}

.nav-cta:hover {
  background-color: var(--color-primary-dark);

  color: var(--color-text-white);

  transform: translateY(-2px);
}

.brand-logo {
  height: 80px;
  width: auto;
  display: block;
}

.brand-mark {
  width: 44px;

  height: 44px;

  border: 1px solid var(--color-primary);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary);

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

  font-size: 25px;
}

.brand-name {
  color: var(--color-text);

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

  font-size: 26px;

  line-height: 0.85;
}

.brand-name small {
  display: block;

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

  font-size: 7px;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-top: 6px;
}

.navbar-nav {
  gap: 25px;
  align-items: center;
}

.navbar-nav .nav-link {
  color: var(--color-text-dark);

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  position: relative;
}

.navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-nav .nav-link::after {
  content: "";

  position: absolute;

  bottom: 0;

  left: 8px;

  width: 0;

  height: 1px;

  background: var(--color-primary);

  transition: 0.3s;
}

.navbar-nav .nav-link:hover::after {
  width: calc(100% - 16px);
}

.navbar-nav .nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

.navbar-nav .nav-link.active::after {
  width: calc(100% - 16px);
}

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

.hero {
  background: var(--color-background-cream);
  height: calc(100vh - var(--navbar-height));
  position: relative;
  flex: 1 1 auto;
  min-height: 100vh;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 130px 0;
}

.hero-kicker {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 25px;
}

.hero h1 {
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 0.82;
  font-weight: 500;
  margin-bottom: 35px;
}

.hero h1 span {
  color: var(--color-primary);
  display: block;
}

.hero-description {
  max-width: 570px;
  color: var(--color-text-gray);
  line-height: 1.9;
  font-size: 15px;
  margin-bottom: 35px;
}

.hero-image {
  height: 620px;
  background:
    linear-gradient(rgba(42, 77, 143, 0.1), rgba(42, 77, 143, 0.1)),
    url("../assets/images/hero.jpg") center / cover;
  position: relative;
}

.hero-image::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(42, 77, 143, 0.35);
  bottom: -35px;
  left: -35px;
}

/* =========================================================
   HERO SCROLL BUTTON
========================================================= */

.hero-scroll {
  position: absolute;
  z-index: 20;

  left: 50%;
  bottom: 100px;

  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 6px;

  padding: 0;

  border: 0;
  outline: none;
  background: transparent;

  color: var(--color-primary-dark);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  cursor: pointer;

  white-space: nowrap;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.hero-scroll span {
  display: block;
}

.hero-scroll i {
  display: block;

  font-size: 17px;
  line-height: 1;

  animation: heroScrollArrow 1.8s ease-in-out infinite;
}

.hero-scroll:hover {
  transform: translateX(-50%) translateY(-3px);
}

.hero-scroll:hover i {
  animation-play-state: paused;
}

@keyframes heroScrollArrow {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }

  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* =========================================================
   HERO SCROLL — MOBILE
========================================================= */

@media (max-width: 767px) {
  .hero-scroll {
    bottom: 80px;
    font-size: 9px;
    letter-spacing: 0.15em;
  }

  .hero-scroll i {
    font-size: 16px;
  }
}

/* =========================================================
   BOOKS HEADING — CHANGING TEXT
========================================================= */

.books-heading {
  position: relative;
  z-index: 5;

  text-align: center;

  max-width: 850px;
  margin: 0 auto 55px;
  padding: 0 20px;
}

.books-heading-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 18px;

  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;

  color: var(--color-primary);
}

.heading-line {
  width: 32px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.6;

  transition: width 0.5s ease;
}

.books-heading:hover .heading-line {
  width: 55px;
}

.changing-heading {
  margin: 0;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 500;
  line-height: 0.95;

  color: var(--color-text);

  min-height: 1em;
}

.changing-word {
  display: inline-block;

  color: var(--color-primary);

  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.changing-word.is-changing {
  opacity: 0;
  transform: translateY(12px);
}

.books-heading p {
  max-width: 500px;

  margin: 22px auto 0;

  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.7;

  color: var(--color-text-gray);
}

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

@media (max-width: 767px) {
  .books-heading {
    margin-bottom: 35px;
    padding: 0 18px;
  }

  .books-heading-label {
    font-size: 9px;
    letter-spacing: 0.17em;
    gap: 9px;
  }

  .heading-line {
    width: 20px;
  }

  .books-heading:hover .heading-line {
    width: 30px;
  }

  .changing-heading {
    font-size: clamp(2.8rem, 12vw, 4rem);
    min-height: 1.1em;
  }

  .books-heading p {
    font-size: 12px;
    margin-top: 16px;
  }
}

/* =====================================================
   BOOK MARQUEE
====================================================== */

.books-marquee {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.book-track {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  display: flex;
  gap: 24px;
}

.book-set {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}

/* =========================================
   INFINITE ANIMATION
========================================= */

.book-track-left {
  animation: bookMarqueeLeft var(--marquee-duration) linear infinite;
}

.book-track-right {
  animation: bookMarqueeRight var(--marquee-duration) linear infinite;
}

/* =====================================================
   LEFT
===================================================== */

@keyframes bookMarqueeLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(var(--marquee-distance) * -1));
  }
}

/* =====================================================
   RIGHT
===================================================== */

@keyframes bookMarqueeRight {
  from {
    transform: translateX(calc(var(--marquee-distance) * -1));
  }

  to {
    transform: translateX(0);
  }
}

/* =========================================
   BOOK
========================================= */

.book-item {
  position: relative;
  flex: 0 0 auto;

  overflow: hidden;

  background: #fff;

  pointer-events: auto;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

/* =====================================================
   CLICK AREA
===================================================== */

.book-click-area {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  cursor: pointer;

  pointer-events: auto;

  z-index: 20;
}

/* =====================================================
   BOOK COVER
====================================================== */

.book-item img {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.book-link {
  display: block;
  position: relative;
  cursor: pointer;
  text-decoration: none;

  /*
   * Make sure the link receives mouse/touch events.
   */
  pointer-events: auto;
}

/* =====================================================
   BOOK HOVER
===================================================== */

.book-link img {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.book-link:hover img {
  transform: scale(1.03);
  opacity: 0.9;
}

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

.book-item:hover {
  transform: translateY(-15px) scale(1.05);

  z-index: 10;
}

.book-item:hover img {
  transform: scale(1.06);
}

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

@media (max-width: 991px) {
  .books-marquee {
    gap: 50px;
  }

  .book-set {
    gap: 18px;
  }
}

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

@media (max-width: 576px) {
  .books-marquee {
    gap: 50px;
  }

  .book-set {
    gap: 15px;
  }
}

/* =========================================================
   AMERICAN EXPRESS
========================================================= */

.amex-section {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: linear-gradient(
    315deg,
    var(--color-primary-dark) 3%,
    var(--color-primary) 38%,
    var(--color-text-gray) 68%,
    var(--color-primary-dark) 98%
  );
  background-size: 400% 400%;

  animation: amexGradient 15s ease infinite;
}

/* Keep content above the waves */

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

/* Text */

.amex-section h2,
.amex-section p,
.amex-section .section-label {
  color: #fff;
}

.amex-logo {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.amex-card-logo {
  max-width: 80px;
}

/* =========================================================
   GRADIENT
========================================================= */

@keyframes amexGradient {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* =========================================================
   WAVES
========================================================= */

.amex-section .wave {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 200%;
  height: 12em;

  border-radius: 1000% 1000% 0 0;

  background: rgba(255, 255, 255, 0.18);

  animation: wave 10s -3s linear infinite;

  opacity: 0.8;

  z-index: 1;
}

.amex-section .wave:nth-child(1) {
  bottom: 0;
}

.amex-section .wave:nth-child(2) {
  bottom: -1.25em;

  animation: wave 18s linear reverse infinite;

  opacity: 0.6;
}

.amex-section .wave:nth-child(3) {
  bottom: -2.5em;

  animation: wave 20s -1s reverse infinite;

  opacity: 0.4;
}

.amex-icon {
  width: 40px;
  height: 40px;

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

  flex-shrink: 0;

  border-radius: 50%;
  color: var(--color-primary);
  font-size: 1.8rem;

  align-self: center; /* keeps it vertically centered */
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-25%);
  }

  50% {
    transform: translateX(-50%);
  }

  75% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(0);
  }
}

/* =========================================================
   HIGHLIGHTS
========================================================= */

.highlights-section {
  background: var(--color-background-light);
}

.highlight-main {
  position: relative;

  height: 500px;

  overflow: hidden;
}

.highlight-main img {
  width: 100%;

  height: 100%;

  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s ease;
}

.highlight-main .carousel-inner,
.highlight-main .carousel-item {
  height: 100%;
}

.highlight-main:hover img {
  transform: scale(1.04);
}

.highlight-overlay {
  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 45px;

  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));

  color: var(--color-text-white);
}

.highlight-main .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.highlight-overlay h3 {
  font-size: 40px;
}

.highlight-card {
  height: 240px;

  overflow: hidden;

  position: relative;
}

.highlight-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;
}

.highlight-card:hover img {
  transform: scale(1.06);
}

.highlight-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.highlight-card-link {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 2;

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

  padding: 24px;

  color: #fff;
  text-decoration: none;

  transition: all 0.3s ease;
}

.highlight-card-link:hover {
  color: #fff;
}

.highlight-card-link:hover i {
  transform: translate(5px, -5px);
}

.highlight-card-link i {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

/* =========================================================
   HIGHLIGHT LINK
========================================================= */

.highlight-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 20px;

  color: var(--color-text-white);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1px;
  text-transform: uppercase;

  transition: all 0.3s ease;
}

.highlight-link i {
  transition: transform 0.3s ease;
}

.highlight-link:hover {
  color: var(--color-text-white);
  opacity: 0.85;
}

.highlight-link:hover i {
  transform: translateX(6px);
}

/* =========================================================
   MAGAZINES
========================================================= */

.magazine-card {
  position: relative;

  overflow: hidden;

  background: #eeeeee;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

.magazine-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;
}

.magazine-card:hover img {
  transform: scale(1.05);
}

.magazine-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    transparent 55%,

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

.magazine-info {
  position: absolute;

  z-index: 2;

  bottom: 20px;

  left: 20px;

  right: 20px;

  color: var(--color-text-white);
}

.magazine-info h4 {
  font-size: 27px;
}

.magazine-info a {
  color: var(--color-text-white);

  font-size: 11px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

/* =========================================================
   SERVICES
========================================================= */
/* =====================================================
   SERVICES SECTIONS
===================================================== */

.services-section-light {
  background: var(--color-background-light);
  color: var(--color-text-dark);
}

.services-section-dark {
  background: var(--color-background-dark);
  color: var(--color-text-white);
}

.services-section-white {
  background: var(--color-background);
  color: var(--color-text-dark);
}

/* =====================================================
   FEATURED SERVICE SEPARATOR
===================================================== */

.service-featured-divider {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

.service-featured-divider-invert {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

/* =====================================================
   SECTION TEXT
===================================================== */

.services-section-light .section-label,
.services-section-white .section-label {
  color: var(--color-text-dark);
}

.services-section-dark .section-label {
  color: var(--color-text-white);
}

.services-section-light .section-title,
.services-section-white .section-title {
  color: var(--color-text-dark);
}

.services-section-dark .section-title {
  color: var(--color-text-white);
}

.service-intro {
  color: var(--color-text-light);
}

/* =====================================================
   SERVICE CARD — BASE
===================================================== */

.service-card {
  height: 100%;
  padding: 35px;
  border: 1px solid transparent;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

/* =====================================================
   LIGHT SERVICE CARD
===================================================== */

.service-card-light {
  color: var(--color-text-dark);
  background-color: var(--color-background-gray);
  border-color: rgba(0, 0, 0, 0.08);
}

.service-card-light h3 {
  color: var(--color-text-dark);
}

.service-card-light p {
  color: var(--color-text-dark);
}

.service-card-light .service-icon {
  color: var(--color-text-dark);
  border: 1px solid var(--color-text-dark);
}

.service-card-light .service-duration {
  color: var(--color-text-dark);
}

/* Light card hover */

.service-card-light:hover {
  transform: translateY(-8px);
  border-color: var(--color-text-dark);
}

/* =====================================================
   DARK SERVICE CARD
===================================================== */

.service-card-dark {
  color: var(--color-text-white);
  background-color: var(--color-background-dark-alt);
  border-color: rgba(255, 255, 255, 0.12);
}

.service-card-dark h3 {
  color: var(--color-text-white);
}

.service-card-dark p,
.service-card-dark a,
.service-card-dark li {
  color: var(--color-text-light);
}

.service-card-dark .service-icon {
  color: var(--color-text-white);
  border: 1px solid var(--color-text-light);
}

.service-card-dark .service-duration {
  color: var(--color-text-white);
}

/* Dark card hover */

.service-card-dark:hover {
  transform: translateY(-8px);
  border-color: var(--color-text-white);
}

/* =====================================================
   SERVICE ICON
===================================================== */

.service-icon {
  width: 55px;
  height: 55px;

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

  margin-bottom: 30px;

  font-size: 22px;
}

.service-icon img {
  width: 35px;
  height: 35px;

  object-fit: contain;
  display: block;
  filter: grayscale(100%);
}

/* =====================================================
   SERVICE TYPOGRAPHY
===================================================== */

.service-card h3 {
  font-size: 30px;
  margin-bottom: 20px;
}

.service-card p {
  line-height: 1.8;
  font-size: 14px;
}

.service-duration {
  line-height: 2;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

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

@media (max-width: 767px) {
  .service-card {
    padding: 28px;
  }

  .service-card h3 {
    font-size: 26px;
  }
}

/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonial-section {
  background: var(--color-background-cream);
}

.testimonial-card {
  background: var(--color-background);

  padding: 45px;

  height: 100%;

  position: relative;
}

.testimonial-card::before {
  content: "“";

  font-family: Georgia, serif;

  font-size: 100px;

  line-height: 1;

  color: #dddddd;

  position: absolute;

  top: 15px;

  left: 30px;
}

.testimonial-text {
  position: relative;

  z-index: 1;

  color: #555555;

  font-size: 14px;

  line-height: 1.9;

  margin: 40px 0 30px;
}

.testimonial-name {
  font-family: var(--font-heading);

  font-size: 27px;
}

.testimonial-category {
  font-size: 11px;

  color: var(--color-primary);

  letter-spacing: 2px;

  text-transform: uppercase;
}

/* =========================================================
   STATISTICS
========================================================= */

.stats-section {
  background: var(--color-primary);

  color: var(--color-text-white);
}

.stat-box {
  text-align: center;

  padding: 30px;

  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-box:last-child {
  border-right: none;
}

.stat-number {
  font-family: var(--font-heading);

  font-size: 70px;

  line-height: 1;
}

.stat-label {
  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 2px;

  opacity: 0.8;
}

/* =========================================================
   FOOTER
========================================================= */

footer {
  background: var(--color-background-dark);

  color: var(--color-text-white);

  padding: 80px 0 30px;
}

.footer-brand {
  font-family: var(--font-heading);

  font-size: 40px;

  margin-bottom: 20px;
}

footer p {
  color: var(--color-text-light);

  font-size: 14px;

  line-height: 1.8;
}

footer h5 {
  font-family: var(--font-body);

  font-size: 12px;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 25px;
}

.footer-links {
  list-style: none;

  padding: 0;
}

.footer-links li {
  margin-bottom: 13px;
}

.footer-links a {
  color: var(--color-text-light);

  font-size: 13px;

  transition: 0.3s;
}

.footer-links a:hover {
  color: var(--color-text-white);
}

.footer-logo {
  display: inline-block;
  margin-bottom: 25px;
}

.footer-logo img {
  width: 180px;
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  filter: brightness(0) invert(1);
}

.footer-logo:hover img {
  transform: scale(1.03);
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}

.social-icon-image {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* Hover: invert the image */
.social-links a:hover .social-icon-image {
  filter: invert(1);
}

/* =========================================
   AUTHOR COMMITMENT SECTION
   ========================================= */

.about-section {
  position: relative;
  overflow: hidden;
}

/* Label */
.about-section .section-label {
  margin-bottom: 18px;
  letter-spacing: 0.18em;
}

/* Divider */
.commitment-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}

.commitment-divider span {
  width: 55px;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
  transform: scaleX(0);
  animation: dividerReveal 1s ease forwards;
}

.commitment-divider i {
  font-size: 15px;
  opacity: 0.65;
  animation: heartReveal 1s ease 0.3s both;
}

/* Heading */
.commitment-title {
  margin-bottom: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.commitment-title em {
  font-weight: 400;
  font-style: italic;
}

/* Description */
.commitment-description {
  max-width: 720px;
  margin-bottom: 0;
  line-height: 1.9;
  font-size: 17px;
}

/* Button */
.commitment-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.commitment-btn i {
  transition: transform 0.35s ease;
}

.commitment-btn:hover {
  transform: translateY(-3px);
}

.commitment-btn:hover i {
  transform: translateX(6px);
}

/* =========================================
   CUSTOM ANIMATIONS
   ========================================= */

@keyframes dividerReveal {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes heartReveal {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  70% {
    transform: scale(1.15);
  }

  100% {
    opacity: 0.65;
    transform: scale(1);
  }
}

@media (max-width: 991.98px) {
  .social-links {
    justify-content: center;
  }
}

.social-links a {
  width: 38px;

  height: 38px;

  border: 1px solid var(--color-border-dark);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-text-white);

  transition: 0.3s;
}

.social-links a:hover {
  background: var(--color-text-white);

  color: var(--color-background-dark);
}

.footer-bottom {
  border-top: 1px solid #333333;

  margin-top: 60px;

  padding-top: 25px;

  color: #777777;

  font-size: 12px;
}

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

@media (max-width: 991px) {
  .navbar-nav {
    gap: 0;
    padding-top: 20px;
  }

  .navbar-nav .nav-link {
    padding: 12px 0;
  }

  .hero {
    min-height: auto;
    height: calc(100svh - var(--navbar-height));
  }

  .hero-content {
    padding: 90px 0 60px;
  }

  .hero-video {
    object-position: center;
  }

  .hero-image {
    height: 450px;
  }

  .stat-box {
    border-right: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .stat-box:last-child {
    border-bottom: none;
  }

  .footer-logo {
    display: flex;
    justify-content: center;
  }

  .footer-logo img {
    width: 180px;
  }

  .amex-card {
    padding: 24px;
  }

  .amex-card .row {
    text-align: center;
  }

  .amex-card .d-flex {
    flex-direction: column;
    text-align: center;
  }

  .amex-icon {
    margin-bottom: 0.75rem;
  }

  .amex-card-logo {
    max-width: 50px;
    margin: 0 auto;
  }

  .hero {
    height: calc(100svh - var(--navbar-height));
    min-height: 600px; /* Optional */
  }

  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;

    background: #e2e2e2;
    padding: 30px 0;
    overflow-y: auto;
  }

  /* Only after Bootstrap has finished opening */
  .navbar-collapse.show {
    height: calc(100vh - 70px) !important;
  }

  .navbar-nav {
    width: 100%;
    text-align: center;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: 16px 20px;
  }

  .navbar-nav .nav-cta {
    display: flex;
    width: calc(100% - 40px);
    margin: 20px auto 0;
    justify-content: center;
    align-items: center;
  }

  .navbar-nav .nav-link {
    font-size: 16px;
  }

  .navbar-nav .nav-link::after {
    text-decoration: none;
    background: none;
  }

  .navbar-nav .nav-link.active {
    font-weight: 800;
  }
}

@media (max-width: 767.98px) {
  .hero-video {
    object-position: 65% center;
  }
  .scroll-to-top {
    right: 16px;
    bottom: 16px;

    width: 46px;
    height: 46px;

    font-size: 1rem;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 55px;
    height: 55px;

    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 50%, transparent);

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

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  .commitment-title {
    font-size: 36px;
  }

  .commitment-description {
    font-size: 16px;
    line-height: 1.8;
  }

  .commitment-divider span {
    width: 35px;
  }
}

@media (max-width: 575px) {
  :root {
    --section-padding: 75px;
  }

  .hero h1 {
    font-size: 4.5rem;
  }

  .highlight-main {
    height: 350px;
  }

  .highlight-overlay {
    padding: 25px;
  }

  .highlight-overlay h3 {
    font-size: 30px;
  }

  .testimonial-card {
    padding: 30px;
  }

  .amex-card {
    padding: 20px;
  }

  .amex-card h4 {
    font-size: 1.3rem;
  }

  .amex-card p {
    font-size: 0.95rem;
  }

  .amex-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1.5rem;
  }

  .amex-card-logo {
    max-width: 60px;
  }
}

.amex-card {
  background: linear-gradient(
    135deg,
    rgba(42, 77, 143, 0.08),
    rgba(107, 143, 196, 0.15)
  );

  border: 1px solid rgba(42, 77, 143, 0.15);

  border-radius: 24px;

  padding: 32px;

  box-shadow: 0 15px 40px rgba(42, 77, 143, 0.12);

  transition: all 0.3s ease;
}

/* =========================================================
   SCROLL TO TOP BUTTON
========================================================= */

.scroll-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;

  width: 52px;
  height: 52px;

  border: none;
  border-radius: 50%;

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

  background: var(--color-primary-dark);
  color: #fff;

  font-size: 1.2rem;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);

  transition: all 0.35s ease;

  z-index: 999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-4px);
  background: var(--secondary-color);
  color: var(--color-primary-dark);
}

.scroll-to-top:active {
  transform: translateY(-1px);
}
/* Mobile */

@media (max-width: 575px) {
  .scroll-to-top {
    right: 20px;

    bottom: 20px;

    width: 55px;

    height: 55px;
  }
}

/* =========================================================
   FULLSCREEN HERO VIDEO
========================================================= */

:root {
  --navbar-height: 88px;
}

/* =========================================================
   FIRST VIEWPORT
========================================================= */

.first-viewport {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =========================================================
   SCAM ALERT
========================================================= */

.scam-alert {
  flex: 0 0 auto;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar {
  flex: 0 0 auto;
}

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

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* =====================================================
   DESKTOP
====================================================== */

.desktop-video {
  display: block;
}

.mobile-video {
  display: none;
}

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

@media (max-width: 767.98px) {
  .desktop-video {
    display: none;
  }

  .mobile-video {
    display: block;
  }
}

/* =========================================================
   AUTHORIZE
========================================================= */

.authorize-link {
  display: inline-block;
}

.authorize-logo {
  width: 90px;
  height: auto;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.authorize-link:hover .authorize-logo {
  transform: scale(1.05);
  opacity: 0.85;
}

/* =========================================================
   MAGAZINE
========================================================= */

.magazineSwiper .swiper-slide {
  height: auto;
}

.magazine-card {
  width: 100%;
}

/* Move pagination lower */
.magazineSwiper {
  padding-bottom: 70px;
}

/* Pagination position */
.magazineSwiper .swiper-pagination {
  bottom: 10px;
}

/* Default dot color */
.magazineSwiper .swiper-pagination-bullet {
  background: #a0a0a0;
  opacity: 1;
  width: 10px;
  height: 10px;
  transition: 0.3s ease;
}

/* Active dot color */
.magazineSwiper .swiper-pagination-bullet-active {
  background: var(--color-primary);
  transform: scale(1.2);
}

/* Swiper navigation buttons */
.magazineSwiper .swiper-button-next,
.magazineSwiper .swiper-button-prev {
  color: var(--color-primary); /* Arrow color */
  transition: 0.3s ease;
}

/* Hover effect */
.magazineSwiper .swiper-button-next:hover,
.magazineSwiper .swiper-button-prev:hover {
  color: var(--color-primary);
}

/* Adjust arrow size */
.magazineSwiper .swiper-button-next::after,
.magazineSwiper .swiper-button-prev::after {
  font-size: 24px;
}

/* =========================================================
   TESTIMONIAL SWIPER
========================================================= */

.testimonialSwiper {
  width: 100%;
  padding: 10px 60px 75px;
}

.testimonialSwiper .swiper-slide {
  height: auto;
  display: flex;
}

.testimonial-card {
  width: 100%;
  height: 100%;
  padding: 45px 40px;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   AUTHOR PHOTO
========================================================= */

.testimonial-photo {
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 25px;
  border: 3px solid var(--color-secondary);
  background: #ffffff;
}

.testimonial-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   TESTIMONIAL TEXT
========================================================= */

.testimonial-text {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #555555;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* =========================================================
   AUTHOR NAME
========================================================= */

.testimonial-name {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* =========================================================
   CATEGORY
========================================================= */

.testimonial-category {
  font-size: 11px;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* =========================================================
   SWIPER NAVIGATION
========================================================= */

.testimonialSwiper .swiper-button-prev,
.testimonialSwiper .swiper-button-next {
  color: var(--color-primary);
  transition: all 0.3s ease;
}

.testimonialSwiper .swiper-button-prev:hover,
.testimonialSwiper .swiper-button-next:hover {
  color: var(--color-primary-dark);
}

.testimonialSwiper .swiper-button-prev::after,
.testimonialSwiper .swiper-button-next::after {
  font-size: 24px;
}

/* =========================================================
   PAGINATION
========================================================= */

.testimonialSwiper {
  padding-bottom: 70px;
}

.testimonialSwiper .swiper-pagination {
  bottom: 10px;
}

.testimonialSwiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #a0a0a0;
  opacity: 1;
  transition: 0.3s ease;
}

.testimonialSwiper .swiper-pagination-bullet-active {
  background: var(--color-primary);
  transform: scale(1.2);
}

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

@media (max-width: 991px) {
  .testimonialSwiper {
    padding-left: 45px;
    padding-right: 45px;
  }

  .testimonial-card {
    padding: 40px 35px;
  }

  .testimonial-photo {
    width: 100px;
    height: 100px;
    flex-basis: 100px;
  }
}

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

@media (max-width: 575px) {
  .testimonialSwiper {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 65px;
  }

  .testimonial-card {
    padding: 35px 25px;
    border-radius: 10px;
  }

  .testimonial-photo {
    width: 85px;
    height: 85px;
    flex-basis: 85px;
    margin-bottom: 20px;
  }

  .testimonial-text {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  .testimonial-name {
    font-size: 24px;
  }

  .testimonial-category {
    font-size: 10px;
  }

  .testimonialSwiper .swiper-button-prev::after,
  .testimonialSwiper .swiper-button-next::after {
    font-size: 16px;
  }

  .testimonialSwiper .swiper-button-prev {
    left: 0;
  }

  .testimonialSwiper .swiper-button-next {
    right: 0;
  }
}

.flipbook-container {
  width: 100%;
  height: 80vh;
}

.flipbook-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =====================================================
         PRIVACY POLICY
      ====================================================== */

.privacy-hero {
  padding: 100px 0 70px;
  background: var(--color-background-light, #f7f7f7);
}

.privacy-content {
  padding: 80px 0;
}

.privacy-document {
  max-width: 950px;
  margin: 0 auto;
}

.privacy-section {
  margin-bottom: 55px;
}

.privacy-section:last-child {
  margin-bottom: 0;
}

.privacy-section h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.privacy-section h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 15px;
}

.privacy-section p {
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  line-height: 1.9;
  color: #555;
  margin-bottom: 18px;
}

.privacy-section ul,
.privacy-section ol {
  padding-left: 25px;
  margin-bottom: 20px;
}

.privacy-section li {
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 8px;
}

.privacy-intro {
  font-size: 1.05rem !important;
  line-height: 1.9 !important;
}

.privacy-divider {
  width: 60px;
  height: 2px;
  background: var(--color-primary, #111);
  margin: 25px 0 35px;
}

.privacy-contact-box {
  padding: 30px;
  background: var(--color-background-light, #f7f7f7);
  border-radius: 12px;
  margin-top: 25px;
}

.privacy-contact-box p {
  margin-bottom: 5px;
}

.privacy-intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-intro a:hover {
  opacity: 0.7;
}

.contact-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.contact-item i {
  line-height: 1;
  color: inherit;
  text-align: left;
  color: var(--color-text-light);
  font-size: 13px;
}

.contact-item div {
  color: var(--color-text-light);
  font-size: 13px;
  line-height: 1.5;
}

/* Center the location icon against the full address */
.contact-item:last-child i {
  align-self: center;
}

@media (max-width: 767px) {
  .privacy-hero {
    padding: 70px 20px 50px;
  }

  .privacy-content {
    padding: 55px 20px;
  }

  .privacy-section {
    margin-bottom: 40px;
  }

  .privacy-section h2 {
    font-size: 1.9rem;
  }

  .privacy-section h3 {
    font-size: 1.45rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .flipbook-container {
    height: 70vh;
  }
}

/* =====================================================
         MUST READ HERO
      ====================================================== */

.wh-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;

  background: var(--color-background-dark, #111111);
  color: #ffffff;

  overflow: hidden;
}

/* =====================================================
   HERO DECORATIVE CIRCLE — TOP RIGHT
===================================================== */

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

  position: absolute;

  width: 500px;
  height: 500px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;

  top: -250px;
  right: -150px;

  animation: heroCircleOne 18s ease-in-out infinite alternate;

  pointer-events: none;
}

/* =====================================================
   HERO DECORATIVE CIRCLE — BOTTOM LEFT
===================================================== */

.wh-hero::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;

  bottom: -180px;
  left: -100px;

  animation: heroCircleTwo 14s ease-in-out infinite alternate;

  pointer-events: none;
}

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

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

/* =====================================================
   SUBTLE MOTION
===================================================== */

@keyframes heroCircleOne {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  50% {
    transform: translate(-25px, 20px) rotate(4deg) scale(1.03);
  }

  100% {
    transform: translate(15px, 40px) rotate(8deg) scale(1);
  }
}

@keyframes heroCircleTwo {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  50% {
    transform: translate(25px, -20px) rotate(-4deg) scale(1.05);
  }

  100% {
    transform: translate(50px, 10px) rotate(-8deg) scale(1);
  }
}

/* =====================================================
   FLOATING LITERARY ICONS
===================================================== */

.hero-floating-icons {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 1;
}

.hero-icon {
  position: absolute;

  color: rgba(255, 255, 255, 0.1);

  font-size: 28px;

  font-weight: 300;

  will-change: transform;

  animation: floatingIcon 12s ease-in-out infinite alternate;
}

.about-section .hero-icon {
  color: rgba(0, 0, 0, 0.75);
}

/* =====================================================
   INDIVIDUAL POSITIONS
===================================================== */

.hero-icon-1 {
  top: 18%;
  left: 8%;
  font-size: 34px;
  animation-duration: 15s;
}

.hero-icon-2 {
  top: 28%;
  right: 12%;
  font-size: 38px;
  animation-duration: 18s;
  animation-delay: -4s;
}

.hero-icon-3 {
  top: 65%;
  left: 15%;
  font-size: 24px;
  animation-duration: 13s;
  animation-delay: -7s;
}

.hero-icon-4 {
  top: 72%;
  right: 8%;
  font-size: 30px;
  animation-duration: 17s;
  animation-delay: -3s;
}

.hero-icon-5 {
  top: 12%;
  right: 32%;
  font-size: 25px;
  animation-duration: 20s;
  animation-delay: -8s;
}

.hero-icon-6 {
  bottom: 15%;
  left: 35%;
  font-size: 27px;
  animation-duration: 16s;
  animation-delay: -5s;
}

.hero-icon-7 {
  top: 42%;
  left: 4%;
  font-size: 25px;
  animation-duration: 19s;
  animation-delay: -10s;
}

.hero-icon-8 {
  bottom: 22%;
  right: 30%;
  font-size: 23px;
  animation-duration: 14s;
  animation-delay: -2s;
}

/* =====================================================
   FLOATING ANIMATION
===================================================== */

@keyframes floatingIcon {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.35;
  }

  50% {
    opacity: 0.65;
  }

  100% {
    transform: translate3d(25px, -30px, 0) rotate(8deg);
    opacity: 0.35;
  }
}

.must-read-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.must-read-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.95;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.must-read-intro {
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
}

/* =====================================================
         INTRO
      ====================================================== */

.must-read-introduction {
  background: var(--color-background, #ffffff);
}

.must-read-introduction .lead-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.25;
  color: var(--color-primary, #111111);
}

/* =====================================================
         WARNING / SCAM SECTION
      ====================================================== */

.author-alert {
  background: var(--color-background-cream, #f4f1eb);
  border-left: 4px solid var(--color-primary-dark, #1c376b);
  padding: 2.5rem;
}

.author-alert-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #ffffff;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.author-alert h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.author-alert p {
  color: #555555;
  line-height: 1.8;
  margin-bottom: 0;
}

/* =====================================================
         MUST READ CARDS
      ====================================================== */

.must-read-card {
  height: 100%;
  padding: 2.5rem;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: #ffffff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.must-read-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.must-read-card-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #ffffff;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.must-read-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.must-read-card p {
  color: #666666;
  line-height: 1.8;
}

.must-read-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: #111111;
  text-decoration: none;
  font-weight: 600;
  transition: gap 0.25s ease;
}

.must-read-link:hover {
  gap: 0.8rem;
}

/* =====================================================
         CHECKLIST
      ====================================================== */

.author-checklist {
  background: #111111;
  color: #ffffff;
}

.author-checklist .section-label {
  color: rgba(255, 255, 255, 0.65);
}

.author-checklist .section-title {
  color: #ffffff;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

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

.checklist-icon {
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checklist-item h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.checklist-item p {
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0;
  line-height: 1.7;
}

.trailer-sample {
  background: var(--color-background-light);
  border: 1px solid var(--color-border-dark);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.trailer-sample:hover {
  transform: translateY(-6px);
  border-color: var(--color-text-dark);
}

.trailer-video {
  width: 100%;
  overflow: hidden;
}

.trailer-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.trailer-sample-content {
  padding: 25px;
}

.trailer-sample-number {
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.trailer-sample-content h4 {
  font-size: 21px;
  margin-bottom: 12px;
}

.trailer-sample-content p {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* =====================================================
         CTA
      ====================================================== */

.must-read-cta {
  text-align: center;
}

.must-read-cta h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
}

.must-read-cta p {
  max-width: 650px;
  margin: 0 auto 2rem;
  color: #666666;
  line-height: 1.8;
}

/* =====================================================
   REVIEW PROVIDER MARQUEE
===================================================== */

.review-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 25px 0;
}

/* Fade on both edges */
.review-marquee::before,
.review-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.review-marquee::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--color-background-light),
    transparent
  );
}

.review-marquee::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--color-background-light),
    transparent
  );
}

/* Moving track */
.review-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: reviewScroll 28s linear infinite;
}

/* Individual logos */
.review-logo {
  width: 220px;
  height: 120px;
  margin-right: 35px;

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

  background: var(--color-background-gray);
  border: 1px solid var(--color-border-light);

  flex-shrink: 0;
}

.review-logo img {
  max-width: 175px;
  max-height: 85px;
  width: auto;
  height: auto;
  object-fit: contain;

  /* Black & white by default */
  filter: grayscale(100%);
  opacity: 0.65;

  transition:
    filter 0.5s ease,
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* Color on hover */
.review-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Continuous movement */
@keyframes reviewScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Small label */
.review-carousel-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.review-carousel-label i {
  margin-right: 6px;
}

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

@media (max-width: 991.98px) {
  .must-read-hero {
    min-height: 48vh;
    text-align: center;
  }

  .must-read-intro {
    margin: 0 auto;
  }

  .author-alert {
    padding: 2rem;
  }
}

@media (max-width: 575.98px) {
  .must-read-hero {
    min-height: 55vh;
  }

  .must-read-card {
    padding: 2rem;
  }

  .author-alert {
    padding: 1.5rem;
  }
}

/* =====================================================
         BLOG PAGE
      ===================================================== */

.blog-hero {
  padding: 150px 0 110px;
  background: var(--color-background-light);
}

.blog-hero .section-title {
  margin-bottom: 25px;
}

.blog-hero-description {
  max-width: 650px;
  margin: 0 auto;
  color: var(--color-text-gray);
  font-size: 17px;
  line-height: 1.8;
}

/* =====================================================
         FEATURED ARTICLE
      ===================================================== */

.featured-blog {
  padding: 110px 0;
  background: var(--color-background);
}

.featured-blog-image {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 10;
}

.featured-blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

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

.blog-category {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-gray);
}

.featured-blog-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 25px;
}

.featured-blog-excerpt {
  color: var(--color-text-gray);
  line-height: 1.8;
  font-size: 16px;
  margin-bottom: 28px;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
  color: var(--color-text-light);
  font-size: 13px;
}

.blog-meta span + span::before {
  content: "•";
  margin-right: 18px;
}

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

.blog-section {
  padding: 110px 0;
  background: var(--color-background-light);
}

.blog-card {
  height: 100%;
  background: var(--color-background);
  overflow: hidden;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.blog-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.06);
}

.blog-card-content {
  padding: 30px;
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 15px;
}

.blog-card-excerpt {
  color: var(--color-text-gray);
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 22px;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: gap 0.3s ease;
}

.blog-read-more:hover {
  gap: 13px;
  color: var(--color-text);
}

.blog-read-more i {
  font-size: 15px;
}

/* =====================================================
         DARK CTA
      ===================================================== */

.blog-cta {
  padding: 110px 0;
  background: var(--color-background-dark);
  color: var(--color-text-white);
  text-align: center;
}

.blog-cta .section-label {
  color: rgba(255, 255, 255, 0.6);
}

.blog-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  font-weight: 500;
  margin-bottom: 25px;
}

.blog-cta p {
  max-width: 600px;
  margin: 0 auto 35px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
}

.typing-cursor {
  display: inline-block;
  margin-left: 3px;
  font-style: normal;
  animation: blink-cursor 0.7s infinite;
}

/* =====================================================
         TERMS & CONDITIONS
      ====================================================== */

.terms-section {
  background: var(--color-background);
}

.terms-intro {
  max-width: 900px;
}

.terms-intro p {
  font-size: 15px;
  line-height: 1.9;
}

.terms-date {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terms-layout {
  margin-top: 70px;
}

.terms-sidebar {
  position: sticky;
  top: 120px;
}

.terms-sidebar-title {
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.terms-sidebar a {
  color: var(--color-text-light);
  display: block;
  padding: 6px 0;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s ease;
}

.terms-sidebar a:hover {
  color: inherit;
}

.terms-content {
  max-width: 850px;
}

.terms-block {
  padding-bottom: 45px;
  margin-bottom: 45px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  scroll-margin-top: 40vh;
}

.terms-block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.terms-block h2 {
  margin-bottom: 18px;
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  font-weight: 600;
}

.terms-block p,
.terms-block li {
  font-size: 14px;
  line-height: 1.9;
}

.terms-block ul {
  padding-left: 22px;
}

.terms-block li {
  margin-bottom: 8px;
}

.terms-contact {
  padding: 30px;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 12px;
}

.terms-contact p {
  margin-bottom: 8px;
}

@media (max-width: 991px) {
  .terms-sidebar {
    position: static;
    margin-bottom: 45px;
  }

  .terms-sidebar a {
    display: inline-block;
    margin-right: 18px;
  }

  .terms-layout {
    margin-top: 50px;
  }
}

@keyframes blink-cursor {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

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

@media (max-width: 991px) {
  .blog-hero {
    padding: 110px 0 80px;
  }

  .featured-blog,
  .blog-section,
  .blog-cta {
    padding: 80px 0;
  }

  .featured-blog-content {
    text-align: center;
    margin-top: 40px;
  }

  .blog-meta {
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .blog-hero {
    padding: 90px 20px 70px;
  }

  .featured-blog,
  .blog-section,
  .blog-cta {
    padding: 70px 20px;
  }

  .blog-card-content {
    padding: 25px;
  }

  .blog-card-title {
    font-size: 27px;
  }
}

/* =========================================================
   BOOK CARD
========================================================= */

.book-card {
  width: 100%;
}

.book-cover-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

/* ---------------------------------------------------------
   PORTRAIT
   Examples:
   6x9
   5.5x8.5
   8.5x11
--------------------------------------------------------- */

.book-card.book-portrait .book-cover-wrapper {
  aspect-ratio: 2 / 3;
}

/* ---------------------------------------------------------
   SQUARE
   Example:
   9x9
--------------------------------------------------------- */

.book-card.book-square .book-cover-wrapper {
  aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------
   LANDSCAPE
   Examples:
   11x8.5
   10x8
--------------------------------------------------------- */

.book-card.book-landscape .book-cover-wrapper {
  aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------
   BOOK COVER
--------------------------------------------------------- */

.book-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  cursor: pointer;

  pointer-events: auto;

  user-select: none;
  -webkit-user-drag: none;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* ---------------------------------------------------------
   BOOK INFORMATION
--------------------------------------------------------- */

.book-info {
  padding-top: 12px;
  text-align: center;
}

.book-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}

.book-author {
  display: block;
  margin-top: 4px;
  opacity: 0.7;
}

/* =====================================================
         BLOG POST
      ===================================================== */

.blog-post-header {
  padding: 100px 0 70px;
  text-align: center;
}

.blog-post-title {
  max-width: 1000px;
  margin: 20px auto;
}

.blog-post-meta {
  margin-top: 20px;
  font-size: 0.9rem;
  opacity: 0.7;
}

.blog-post-image {
  margin: 0 auto 70px;
  max-width: 1100px;
}

.blog-post-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: cover;
  border-radius: 4px;
}

.blog-post-content {
  max-width: 850px;
  margin: 0 auto;
}

.blog-post-excerpt {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 45px;
  opacity: 0.8;
}

.blog-post-body {
  font-size: 1.05rem;
  line-height: 1.9;
}

.blog-post-body p {
  margin-bottom: 1.5rem;
}

.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4 {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

.blog-post-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
}

.blog-post-body blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid currentColor;
  font-style: italic;
}

.blog-post-back {
  margin-top: 50px;
}

/* =====================================================
         ERROR STATE
      ===================================================== */

.blog-post-error {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* =====================================================
   EVENT PHOTO LIGHTBOX
===================================================== */

.event-photo-lightbox {
  position: fixed;
  inset: 0;

  z-index: 99999;

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

  background: rgba(0, 0, 0, 0.92);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.event-photo-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =====================================================
   IMAGE
===================================================== */

.event-photo-lightbox-content {
  position: relative;

  width: 100%;
  height: 100%;

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

  padding: 60px 100px;
}

.event-photo-lightbox-content img {
  display: block;

  max-width: 100%;
  max-height: 90vh;

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 8px;

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

/* =====================================================
   CLOSE BUTTON
===================================================== */

.event-photo-lightbox-close {
  position: absolute;

  top: 25px;
  right: 30px;

  z-index: 10;

  width: 48px;
  height: 48px;

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

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);
  color: #fff;

  font-size: 20px;

  cursor: pointer;
}

.event-photo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* =====================================================
   NAVIGATION
===================================================== */

.event-photo-lightbox-nav {
  position: absolute;

  top: 50%;

  z-index: 10;

  width: 52px;
  height: 52px;

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

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);
  color: #fff;

  font-size: 24px;

  cursor: pointer;

  transform: translateY(-50%);
}

.event-photo-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.event-photo-lightbox-prev {
  left: 25px;
}

.event-photo-lightbox-next {
  right: 25px;
}

/* =====================================================
   GALLERY IMAGE
===================================================== */

.event-gallery-photo {
  display: block;

  width: 100%;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.event-gallery-photo:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

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

@media (max-width: 767.98px) {
  .event-photo-lightbox-content {
    padding: 70px 55px;
  }

  .event-photo-lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
  }

  .event-photo-lightbox-close {
    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;
  }

  .event-photo-lightbox-nav {
    width: 42px;
    height: 42px;

    font-size: 20px;
  }

  .event-photo-lightbox-prev {
    left: 10px;
  }

  .event-photo-lightbox-next {
    right: 10px;
  }
}

/* ===========================================
   UPCOMING EVENT LOGO
=========================================== */

.upcoming-event-logo img {
  max-width: 260px;
  filter: brightness(0) invert(1);
}

/* WHITE BACKGROUND */

.services-section {
  --event-logo-filter: brightness(0);
}

/* DARK BACKGROUND */

.services-section.dark-section {
  --event-logo-filter: brightness(0) invert(1);
}

/* =====================================================
   LOADING DOTS
===================================================== */

.loading-dots {
  display: inline-flex;
  margin-left: 4px;
}

.loading-dots span {
  display: inline-block;
  opacity: 0.2;
  animation: loadingDot 1.4s infinite;
}

.loading-dots span:nth-child(1) {
  animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loadingDot {
  0%,
  60%,
  100% {
    opacity: 0.2;
  }

  30% {
    opacity: 1;
  }
}

/* =====================================================
   UPCOMING EVENT PANEL
====================================================== */

.upcoming-event-panel {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 700px;

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

  background: var(--color-background-dark);

  overflow: hidden;

  z-index: 10;
}

/* =====================================================
   BLACK BLURRED CIRCLES
====================================================== */

.upcoming-blur-circle {
  position: absolute;

  display: block;

  border-radius: 50%;

  background: #000;

  pointer-events: none;

  z-index: 1;

  will-change: transform;
}

/* =====================================================
   CIRCLE 1
====================================================== */

.upcoming-blur-circle-1 {
  width: 500px;
  height: 500px;

  top: -180px;
  left: -180px;

  opacity: 0.45;

  filter: blur(100px);

  animation: upcomingBlurOne 9s ease-in-out infinite alternate;
}

/* =====================================================
   CIRCLE 2
====================================================== */

.upcoming-blur-circle-2 {
  width: 550px;
  height: 550px;

  right: -250px;
  top: 15%;

  opacity: 0.4;

  filter: blur(110px);

  animation: upcomingBlurTwo 11s ease-in-out infinite alternate;
}

/* =====================================================
   CIRCLE 3
====================================================== */

.upcoming-blur-circle-3 {
  width: 400px;
  height: 400px;

  bottom: -180px;
  left: 25%;

  opacity: 0.42;

  filter: blur(90px);

  animation: upcomingBlurThree 10s ease-in-out infinite alternate;
}

/* =====================================================
   CONTENT ABOVE BLURRED CIRCLES
====================================================== */

.upcoming-event-panel .container {
  position: relative;
  z-index: 5;
}

.upcoming-event-panel-inner {
  position: relative;
  z-index: 5;
}

/* =====================================================
   BLUR ANIMATIONS
====================================================== */

@keyframes upcomingBlurOne {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(120px, 80px) scale(1.2);
  }
}

@keyframes upcomingBlurTwo {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-100px, 100px) scale(1.15);
  }
}

@keyframes upcomingBlurThree {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(100px, -80px) scale(1.2);
  }
}

/* =====================================================
   INTRO
====================================================== */

.upcoming-event-intro {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;
  min-height: 700px;

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

  background: #fff;

  z-index: 1;
  overflow: hidden;
}

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

.upcoming-event-intro .container {
  animation: upcomingIntroEnter 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* =====================================================
   INTRO ANIMATION
====================================================== */

@keyframes upcomingIntroEnter {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =====================================================
   ANIMATED BLACK BLUR ON WHITE INTRO
====================================================== */

.upcoming-event-intro::before {
  content: "";

  position: absolute;

  width: 450px;
  height: 450px;

  top: -180px;
  left: -150px;

  border-radius: 50%;

  background: #000;

  opacity: 0.08;

  filter: blur(100px);

  animation: introBlurMove 8s ease-in-out infinite alternate;

  pointer-events: none;
}

.upcoming-event-intro::after {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -200px;
  bottom: -200px;

  border-radius: 50%;

  background: #000;

  opacity: 0.07;

  filter: blur(110px);

  animation: introBlurMoveTwo 10s ease-in-out infinite alternate;

  pointer-events: none;
}

/* =====================================================
   KEEP TEXT ABOVE BLUR
====================================================== */

.upcoming-event-intro .container {
  position: relative;
  z-index: 2;
}

/* =====================================================
   BLUR ANIMATIONS
====================================================== */

@keyframes introBlurMove {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(140px, 100px) scale(1.25);
  }
}

@keyframes introBlurMoveTwo {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-120px, -80px) scale(1.2);
  }
}

/* =====================================================
   EVENT PANELS
====================================================== */

.upcoming-event-panels {
  position: relative;

  width: 100%;

  z-index: 10;
}

/* =====================================================
   EACH EVENT IS A FULL SCREEN LAYER
====================================================== */

.upcoming-event-panel {
  position: relative;

  width: 100%;

  height: 100vh;

  min-height: 700px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--color-background-dark);

  z-index: 10;

  overflow: hidden;
}

/* =====================================================
   WHITE BLURRED CIRCLES
====================================================== */

.upcoming-event-panel::before {
  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  top: -180px;

  left: -180px;

  border-radius: 50%;

  background: #fff;

  opacity: 0.12;

  filter: blur(100px);

  pointer-events: none;

  z-index: 1;

  animation: upcomingWhiteCircleOne 9s ease-in-out infinite alternate;
}

.upcoming-event-panel::after {
  content: "";

  position: absolute;

  width: 550px;

  height: 550px;

  right: -250px;

  bottom: -200px;

  border-radius: 50%;

  background: #fff;

  opacity: 0.1;

  filter: blur(110px);

  pointer-events: none;

  z-index: 1;

  animation: upcomingWhiteCircleTwo 11s ease-in-out infinite alternate;
}

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

.upcoming-event-panel-inner {
  position: relative;

  z-index: 5;

  width: 100%;

  max-width: 1100px;

  margin: 0 auto;

  padding: 60px;

  text-align: center;
}

/* =====================================================
   EVENT LOGO
====================================================== */

.upcoming-event-logo {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 45px;
  filter: brightness(0) invert(1);
}

.upcoming-event-logo img {
  display: block;

  width: 100%;

  max-width: 600px;

  height: auto;

  margin: 0 auto;

  /* WHITE LOGO ON DARK BACKGROUND */

  filter: brightness(0) invert(1);
}

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

.upcoming-event-description {
  color: #fff;
  margin: 25px auto 0;
}

/* =====================================================
   UPCOMING EVENT SECTION LABEL
====================================================== */

.upcoming-event-panel .section-label {
  color: #fff;
}

/* =====================================================
   BUTTONS
====================================================== */

.upcoming-event-buttons {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 15px;

  margin-top: 35px;
}

/* =====================================================
   WHITE CIRCLE ANIMATION
====================================================== */

@keyframes upcomingWhiteCircleOne {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(120px, 90px) scale(1.2);
  }
}

@keyframes upcomingWhiteCircleTwo {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-100px, -80px) scale(1.15);
  }
}

/* =====================================================
   NO EVENTS
====================================================== */

.upcoming-event-no-events {
  position: relative;

  width: 100%;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--color-background-dark);

  z-index: 10;
}

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

@media (max-width: 767.98px) {
  .upcoming-event-intro,
  .upcoming-event-panel {
    height: 100svh;

    min-height: 100svh;
  }

  .upcoming-event-panel {
    padding: 40px 20px;
  }

  .upcoming-event-panel-inner {
    padding: 30px 15px;
  }

  .upcoming-event-logo {
    margin-bottom: 30px;
  }

  .upcoming-event-logo img {
    max-width: 320px;
  }

  .upcoming-event-panel::before {
    width: 300px;

    height: 300px;

    filter: blur(75px);
  }

  .upcoming-event-panel::after {
    width: 350px;

    height: 350px;

    filter: blur(80px);
  }
}

/* =====================================================
   EVENT HERO — WELLS HAMILTON + LOGO
====================================================== */

.event-wells-hamilton-label {
  display: block;
  margin-bottom: 25px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.event-fair-logo {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}

/* =====================================================
   EVENT LONG DESCRIPTION
====================================================== */

#eventLongDescription {
  text-align: justify;
}

#eventLongDescription p {
  margin-bottom: 1.5rem;
}

#eventLongDescription p:last-child {
  margin-bottom: 0;
}

/* =====================================================
   BLOG POST BODY
====================================================== */

.blog-post-body {
  text-align: justify;
}

.blog-post-body p {
  margin-bottom: 1.5rem;
}

.blog-post-body h3 {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.blog-post-body ul {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.blog-post-body li {
  margin-bottom: 0.5rem;
}