/**
* Template Name: TheEvent
* Template URL: https://bootstrapmade.com/theevent-conference-event-bootstrap-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts
   Display: Bricolage Grotesque — a modern grotesque with just enough
   personality in its curves to still feel editorial at large sizes,
   used for the hero and section headings.
   Nav/Mono: Space Grotesk — same type-foundry lineage as the original
   Space Mono cue-sheet reference, kept for the uppercase nav and
   micro-labels but far more legible at small sizes than a true
   monospace.
   Body: Inter — a neutral, highly legible UI sans that gets out of
   the way. */
:root {
  --default-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --nav-font: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

/* Global Colors — Polman Entertainment And Events LTD
   Token names describe what the color IS in the physical world of an
   event production, not just its role, so they stay meaningful as the
   site grows:
     --ink     curtain black    #14110D
     --paper   programme paper  #FBF8F1
     --gold    spotlight gold   #E8A33D  (primary accent)
     --ember   brand ember      #C6541C  (from the Polman logo mark)
     --ash     ink at low opacity, for body copy on paper           */
:root {
  --ink: #14110d;
  --paper: #fbf8f1;
  --paper-2: #f1ebdd;
  --gold: #e8a33d;
  --ember: #c6541c;
  --ash: #3a352c;

  --background-color: var(--paper);
  --default-color: var(--ash);
  --heading-color: var(--ink);
  --accent-color: var(--gold);
  --accent-color-2: var(--ember);
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  --nav-color: rgba(251, 248, 241, 0.72);
  --nav-hover-color: var(--gold);
  --nav-mobile-background-color: var(--ink);
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: var(--ink);
  --nav-dropdown-hover-color: var(--ember);
}

/* Color Presets */

.light-background {
  --background-color: var(--paper-2);
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: var(--ink);
  --default-color: #d9d2c2;
  --heading-color: #fbf8f1;
  --surface-color: #1e1a13;
  --contrast-color: #14110d;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--ember);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

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

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

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

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: var(--paper);
  --heading-color: var(--ink);
  --nav-color: var(--ink);
  --nav-hover-color: var(--ember);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 16px 0;
  border-bottom: 1px solid rgba(20, 17, 13, 0.1);
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .cta-btn,
.header .cta-btn:focus {
  color: var(--ink);
  background: var(--accent-color);
  font-family: var(--nav-font);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 11px 22px;
  margin: 0 0 0 30px;
  border-radius: 2px;
  transition: 0.3s;
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  color: var(--ink);
  background: var(--paper-2);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .cta-btn {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 4px 22px rgba(20, 17, 13, 0.1);
}

.header .logo img {
  max-height: 46px;
  margin-right: 8px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 12.5px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  background-color: color-mix(in srgb, var(--background-color), white 5%);
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 100px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer h4 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 15px;
}

.footer h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--accent-color);
  bottom: 0;
  left: 0;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

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

.footer .copyright {
  padding: 30px 0;
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 5px;
  font-size: 13px;
}

.footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--contrast-color);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: var(--accent-color);
  text-decoration: none;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: #000000;
  --heading-color: #ffffff;
  --default-color: rgba(255, 255, 255, 0.8);
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 0 70px 0;
  text-align: left;
  position: relative;
  border-bottom: 1px solid rgba(232, 163, 61, 0.4);
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 38%);
  position: absolute;
  inset: 0;
}

.page-title .heading {
  position: relative;
  z-index: 1;
}

.page-title .heading .row {
  justify-content: flex-start !important;
  text-align: left !important;
}

.page-title h1 {
  font-size: 44px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.page-title p {
  font-family: var(--nav-font);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
}

.page-title .breadcrumbs {
  position: relative;
  z-index: 1;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  font-family: var(--nav-font);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: left;
  padding-bottom: 54px;
  position: relative;
  max-width: 720px;
}

.section-title h2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.section-title h2 em,
.section-title h2 i {
  font-style: italic;
  font-weight: 400;
  color: var(--ember);
}

.section-title p {
  margin-bottom: 0;
  font-size: 16.5px;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/* A section-title inside a centered container (rare — used only where
   the surrounding layout is genuinely symmetric) can opt back in. */
.section-title.text-center-title {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/* Hero — an asymmetric two-up rather than the full-bleed-photo-with-
   centered-text default: a curtain-black copy panel that reads like the
   cover of a show programme, next to a single framed photograph. */
.hero-split {
  width: 100%;
  min-height: 90vh;
  position: relative;
  padding: 150px 0 80px 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-split:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 17, 13, 0.94) 0%, rgba(20, 17, 13, 0.86) 38%, rgba(20, 17, 13, 0.55) 68%, rgba(20, 17, 13, 0.35) 100%);
  z-index: 0;
}

.hero-split .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .hero-split:before {
    background: linear-gradient(180deg, rgba(20, 17, 13, 0.92) 0%, rgba(20, 17, 13, 0.9) 55%, rgba(20, 17, 13, 0.8) 100%);
  }
}

.hero-kicker {
  font-family: var(--nav-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-kicker:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  animation: hero-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-split h1 {
  font-size: 56px;
  line-height: 1.08;
  font-weight: 500;
  color: #fff;
  margin: 0 0 24px 0;
  letter-spacing: -0.5px;
}

.hero-split h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.hero-split p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 17.5px;
  max-width: 460px;
  margin: 0 0 36px 0;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-frame {
  position: relative;
}

.hero-frame:before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: -22px;
  bottom: -22px;
  border: 1px solid var(--gold);
  z-index: 0;
}

.hero-frame .frame-photo {
  position: relative;
  z-index: 1;
  height: 520px;
  overflow: hidden;
}

.hero-frame .frame-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(10%) contrast(1.05);
}

.hero-frame .frame-photo .swiper,
.hero-frame .frame-photo .swiper-wrapper,
.hero-frame .frame-photo .swiper-slide {
  width: 100%;
  height: 100%;
}
.hero-frame .frame-photo .swiper-pagination {
  top: 18px !important;
  bottom: auto !important;
  left: auto !important;
  right: 18px !important;
  width: auto !important;
  padding: 8px 12px;
  background: rgba(20, 17, 13, 0.4);
  border-radius: 30px;
  backdrop-filter: blur(2px);
  text-align: right;
}
.hero-frame .frame-photo .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 0.5;
  transition: 0.3s;
}
.hero-frame .frame-photo .swiper-pagination-bullet-active {
  background: var(--gold);
  opacity: 1;
  width: 22px;
  border-radius: 4px;
}
.hero-frame .frame-photo .swiper-button-prev,
.hero-frame .frame-photo .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 17, 13, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(2px);
  transition: 0.3s;
}
.hero-frame .frame-photo .swiper-button-prev:after,
.hero-frame .frame-photo .swiper-button-next:after {
  font-size: 14px;
  font-weight: 700;
}
.hero-frame .frame-photo .swiper-button-prev:hover,
.hero-frame .frame-photo .swiper-button-next:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.hero-frame .frame-photo .swiper-button-prev {
  left: 14px;
}
.hero-frame .frame-photo .swiper-button-next {
  right: 14px;
}
@media (max-width: 575px) {
  .hero-frame .frame-photo .swiper-button-prev,
  .hero-frame .frame-photo .swiper-button-next {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-frame .frame-photo .swiper-wrapper {
    transition-duration: 0ms !important;
  }
}

.hero-tag {
  position: absolute;
  z-index: 2;
  left: -1px;
  bottom: -1px;
  background: var(--ink);
  color: #fff;
  padding: 20px 26px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  min-width: 190px;
}

.hero-tag .tag-num {
  display: block;
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}

.hero-tag .tag-label {
  font-family: var(--nav-font);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
}

@media (max-width: 991px) {
  .hero-split { padding: 130px 0 60px 0; text-align: left; }
  .hero-split h1 { font-size: 40px; }
  .hero-frame { margin-top: 50px; }
  .hero-frame:before { top: 14px; left: 14px; right: -14px; bottom: -14px; }
  .hero-frame .frame-photo { height: 360px; }
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--ink);
  background: var(--gold);
  border: 0;
  padding: 14px 38px;
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  transition: 0.3s;
  border-radius: 2px;
}

.contact .php-email-form button[type=submit]:hover {
  background: var(--ink);
  color: #fff;
}

.contact .php-email-form label,
.contact .php-email-form .form-label {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--heading-color);
}

/*--------------------------------------------------------------
# Polman Custom Components
--------------------------------------------------------------*/

/* Buttons — squared, monospace, tracked out like a printed ticket
   stub rather than the generic rounded-pill CTA. */
.btn-polman,
.btn-polman-outline,
.btn-polman-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 15px 28px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: 0.3s;
}
.btn-polman {
  background: var(--accent-color);
  color: var(--ink);
  border-color: var(--accent-color);
}
.btn-polman:hover {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}
.btn-polman-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-polman-outline:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn-polman-dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-polman-dark:hover {
  background: var(--ink);
  color: #fff;
}

/* Eyebrow — set like a cue-sheet slug line: CUE / SCENE labels, not
   a decorative kicker. Ties every section back to the rundown motif. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 14px;
}
.eyebrow:before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--ember);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--gold); }
.eyebrow.on-dark:before { background: var(--gold); }

/*--------------------------------------------------------------
# Marquee Ticker (below hero) — reads like backlit signage lettering
# scrolling past, standing in for the generic icon-strip default.
--------------------------------------------------------------*/
.marquee-strip {
  position: relative;
  background: var(--ink);
  border-top: 1px solid rgba(232, 163, 61, 0.25);
  border-bottom: 1px solid rgba(232, 163, 61, 0.25);
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track span {
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(251, 248, 241, 0.75);
  padding: 0 18px;
}
.marquee-track .dot {
  color: var(--gold);
  padding: 0;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about-section .about-img {
  position: relative;
  margin-left: 22px;
}
.about-section .about-img:before {
  content: "";
  position: absolute;
  top: 22px;
  left: -22px;
  right: 22px;
  bottom: -22px;
  border: 1px solid var(--ember);
  z-index: 0;
}
.about-section .about-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(8%) contrast(1.03);
}
.about-section .about-badge {
  position: absolute;
  z-index: 2;
  bottom: -1px;
  right: -23px;
  background: var(--ink);
  color: #fff;
  padding: 20px 26px;
  border-top: 1px solid var(--ember);
  border-left: 1px solid var(--ember);
  text-align: left;
  line-height: 1.1;
}
.about-section .about-badge strong {
  display: block;
  font-size: 28px;
  font-family: var(--heading-font);
  font-weight: 500;
  color: var(--gold);
}
.about-section .about-badge span {
  font-family: var(--nav-font);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 991px) {
  .about-section .about-img { margin-left: 14px; }
  .about-section .about-img:before { top: 14px; left: -14px; right: 14px; bottom: -14px; }
}
.about-section .check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.about-section .check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--heading-color);
}
.about-section .check-list i {
  color: var(--ember);
  font-size: 16px;
  margin-top: 3px;
}

/*--------------------------------------------------------------
# Services Grid — styled as cue cards from a production rundown:
# a numbered slip with a perforated top edge, not an icon tile.
# The cue number is generated (CSS counter), so markup stays plain.
--------------------------------------------------------------*/
.services .row.gy-4,
.event-types .row.gy-4 {
  counter-reset: cue;
}
.service-card {
  counter-increment: cue;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 88%);
  border-radius: 0;
  padding: 40px 30px 32px;
  height: 100%;
  transition: 0.3s;
  position: relative;
}
.service-card:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background-image: radial-gradient(circle, var(--background-color) 2.6px, transparent 3px);
  background-size: 14px 6px;
  background-repeat: repeat-x;
  background-position: 4px 0;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(20,17,13,0.1);
  border-color: transparent;
}
.service-card .service-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-top: 8px;
}
.service-card .service-icon:before {
  content: "CUE " counter(cue, decimal-leading-zero);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ember);
}
.service-card .service-icon i {
  font-size: 22px;
  color: var(--ink);
}
.service-card:hover .service-icon i {
  color: var(--ember);
}
.service-card h3 {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 12px;
}
.service-card p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  margin-bottom: 16px;
}
.service-card .service-link {
  font-family: var(--nav-font);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--heading-color);
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 88%);
  padding-top: 14px;
  display: block;
}
.service-card .service-link i {
  transition: 0.3s;
  margin-left: 4px;
}
.service-card:hover .service-link {
  color: var(--ember);
}
.service-card:hover .service-link i {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Featured Showcase (alternating rows) — framed like the about
# photo, labelled like a cue-sheet track rather than a plain "01".
--------------------------------------------------------------*/
.showcase-row {
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink), transparent 92%);
}
.showcase-row:last-child {
  border-bottom: none;
}
.showcase-row .showcase-img {
  position: relative;
  margin-right: 22px;
  overflow: visible;
}
.showcase-row .showcase-img:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 20px;
  right: -20px;
  bottom: 20px;
  border: 1px solid var(--gold);
  z-index: 0;
}
.showcase-row .showcase-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 380px;
  object-fit: cover;
  transition: 0.6s;
  filter: grayscale(8%) contrast(1.03);
}
.showcase-row:hover .showcase-img img {
  transform: scale(1.03);
}
.showcase-row.flex-lg-row-reverse .showcase-img {
  margin-right: 0;
  margin-left: 22px;
}
.showcase-row.flex-lg-row-reverse .showcase-img:before {
  left: -20px;
  right: 20px;
}
.showcase-row .showcase-number {
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--ember);
  letter-spacing: 2px;
}
@media (max-width: 991px) {
  .showcase-row .showcase-img,
  .showcase-row.flex-lg-row-reverse .showcase-img { margin: 0 0 20px 0; }
}

/*--------------------------------------------------------------
# Why Choose Us
--------------------------------------------------------------*/
.why-choose {
  background: var(--heading-color);
  color: #fff;
}
.why-choose .section-title h2,
.why-choose .section-title p {
  color: #fff;
}
.why-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(232, 163, 61, 0.16);
}
.why-item i {
  font-size: 15px;
  color: var(--gold);
  flex-shrink: 0;
  transform: translateY(1px);
}
.why-item h4 {
  color: #fff;
  font-family: var(--default-font);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.why-item p {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  margin-bottom: 0;
}
.why-choose .why-img {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.why-choose .why-img img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/*--------------------------------------------------------------
# Event Type Cards
--------------------------------------------------------------*/
.event-type-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 340px;
}
.event-type-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}
.event-type-card:hover img {
  transform: scale(1.08);
}
.event-type-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,17,13,0.9) 0%, rgba(20,17,13,0.15) 60%, rgba(20,17,13,0.05) 100%);
}
.event-type-card:before,
.event-type-card:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  z-index: 2;
  opacity: 0;
  transition: 0.3s;
}
.event-type-card:before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.event-type-card:after { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.event-type-card:hover:before,
.event-type-card:hover:after { opacity: 1; }
.event-type-card .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px;
  color: #fff;
}
.event-type-card .content h3 {
  font-weight: 500;
}
.event-type-card .content h3 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 6px;
}
.event-type-card .content p {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: 0.4s;
  opacity: 0;
}
.event-type-card:hover .content p {
  max-height: 100px;
  opacity: 1;
  margin-top: 8px;
}

/*--------------------------------------------------------------
# Process — presented as a show rundown: cue number, call, detail.
# Order carries real information here (this is an actual sequence),
# so the numbering is functional, not decorative.
--------------------------------------------------------------*/
.process-step {
  text-align: left;
  padding: 26px 24px;
  position: relative;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 90%);
  border-left: 3px solid var(--ember);
  height: 100%;
}
.process-step .step-number {
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--ember);
  margin-bottom: 16px;
  display: block;
}
.process-step .step-number:before {
  content: "CUE ";
}
.process-step h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.process-step p {
  font-size: 14.5px;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  margin-bottom: 0;
}
.process-steps-row {
  position: relative;
}

/*--------------------------------------------------------------
# CTA Band — framed like a marquee poster, gold hairline border
# set in from the edge rather than a flat full-bleed gradient block.
--------------------------------------------------------------*/
.cta-band {
  background: var(--ink);
  color: #fff;
  padding: 34px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .cta-frame {
  border: 1px solid rgba(232, 163, 61, 0.35);
  padding: 64px 30px;
  position: relative;
}
.cta-band .cta-frame:before,
.cta-band .cta-frame:after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
}
.cta-band .cta-frame:before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.cta-band .cta-frame:after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 {
  color: #fff;
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 14px;
}
.cta-band h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.cta-band p {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto 30px auto;
}
.cta-band .cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/*--------------------------------------------------------------
# Stat / Value Cards
--------------------------------------------------------------*/
.value-card {
  text-align: left;
  padding: 30px 26px;
  background: var(--surface-color);
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--ink), transparent 90%);
  border-top: 2px solid var(--ember);
  height: 100%;
  transition: 0.3s;
}
.value-card:hover {
  box-shadow: 0 16px 34px rgba(20,17,13,0.08);
  transform: translateY(-4px);
}
.value-card i {
  font-size: 22px;
  color: var(--ember);
  margin-bottom: 18px;
  display: inline-block;
}
.value-card h3 {
  font-size: 17.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.value-card p {
  font-size: 14.5px;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  margin-bottom: 0;
}
/* Our Clients grid uses value-card as a plain centered tile — keep those centered */
.text-center .value-card {
  text-align: center;
}
.text-center .value-card i {
  display: block;
}

/*--------------------------------------------------------------
# Equipment List
--------------------------------------------------------------*/
.equipment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.equipment-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.equipment-list li:last-child {
  border-bottom: none;
}
.equipment-list i {
  width: 40px;
  min-width: 40px;
  color: var(--ember);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  font-size: 20px;
}
.equipment-list h4 {
  font-size: 16px;
  margin-bottom: 2px;
}
.equipment-list p {
  font-size: 14px;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

/*--------------------------------------------------------------
# Booking / Quote Form Section
--------------------------------------------------------------*/
.book-a-table {
  padding: 0;
}
.book-a-table .reservation-img {
  min-height: 100%;
  background-size: cover;
  background-position: center;
}
.book-a-table .reservation-form-bg {
  background: var(--surface-color);
  padding: 50px;
}
@media (max-width: 991px) {
  .book-a-table .reservation-img {
    min-height: 280px;
  }
  .book-a-table .reservation-form-bg {
    padding: 34px 24px;
  }
}
.book-a-table .nav-tabs {
  border-bottom: 1px solid color-mix(in srgb, var(--ink), transparent 88%);
  gap: 8px;
}
.book-a-table .nav-tabs .nav-link {
  border: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-weight: 700;
  font-family: var(--nav-font);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  padding: 10px 4px;
  margin-right: 30px;
  border-radius: 0;
}
.book-a-table .nav-tabs .nav-link.active {
  color: var(--ember);
  background: transparent;
  border-bottom: 2px solid var(--ember);
  margin-bottom: -1px;
}
.book-a-table .form-label {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--heading-color);
  margin-bottom: 8px;
}
.book-a-table .form-control,
.book-a-table .form-select {
  border: 1px solid color-mix(in srgb, var(--ink), transparent 80%);
  border-radius: 2px;
  padding: 11px 14px;
  font-size: 15px;
  background: var(--paper);
}
.book-a-table .form-control:focus,
.book-a-table .form-select:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember), transparent 88%);
}
.book-a-table .formLabel {
  font-size: 14px;
  margin-left: 8px;
  color: var(--default-color);
}
.book-a-table .form-check-label a {
  color: var(--ember);
}
.book-a-table .services-check {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.book-a-table .services-check .form-check {
  min-width: 180px;
}
.book-a-table button[type="submit"] {
  background: var(--gold);
  color: var(--ink);
  border: none;
  padding: 14px 42px;
  border-radius: 2px;
  font-family: var(--nav-font);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  transition: 0.3s;
}
.book-a-table button[type="submit"]:hover {
  background: var(--ink);
  color: #fff;
}

/*--------------------------------------------------------------
# Contact Page Extras
--------------------------------------------------------------*/
.contact .info-item {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 90%);
  border-top: 2px solid var(--ember);
  border-radius: 0;
  padding: 32px 24px;
  height: 100%;
}
.contact .info-item i {
  font-size: 24px;
  color: var(--ember);
  margin-bottom: 18px;
  display: inline-block;
}
.contact .info-item h3 {
  font-family: var(--nav-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 10px;
}
.contact .info-item p {
  margin-bottom: 4px;
  font-size: 14.5px;
}
.contact .php-email-form {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 90%);
  border-radius: 0;
  padding: 34px;
}

/*--------------------------------------------------------------
# Simple Page Gallery Grid
--------------------------------------------------------------*/
.polman-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
  display: block;
}
.polman-gallery-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: 0.5s;
}
.polman-gallery-item:hover img {
  transform: scale(1.1);
}
.polman-gallery-item .gallery-zoom {
  position: absolute;
  inset: 0;
  background: rgba(23,20,15,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.3s;
}
.polman-gallery-item:hover .gallery-zoom {
  opacity: 1;
}
.polman-gallery-item .gallery-zoom i {
  color: #fff;
  font-size: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*--------------------------------------------------------------
# Footer tagline
--------------------------------------------------------------*/
.footer .footer-tagline {
  color: var(--accent-color);
  font-weight: 700;
  font-family: var(--heading-font);
  margin: 8px 0 12px 0;
  font-size: 14.5px;
  letter-spacing: 0.3px;
}
.footer .sitename {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.25;
  color: #fff;
}