:root {
  --primary-gold: #B89B5E;
  --dark-bg: #22282D;
  --text-light: #f8f9fa;
  --text-gray: #b0b0b0;
  --text-gold-light: #E2D5B8;
}

body {
  font-size: 1.2em;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1 {
  font-size: 4em;
}

.physt,
h1,
h2,
h3,
h4,
h5,
.navbar-brand {
  font-family: 'Playfair Display', serif;
}

h6 {
  font-size: 1.3em;
}


/* Colors & Backgrounds */
.text-justify {
  text-align: justify;
}

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

.bg-gold {
  background-color: var(--primary-gold);
  color: white;
}

.text-gold {
  color: var(--primary-gold) !important;
}

.bg-dark-custom {
  background-color: var(--dark-bg);
  color: var(--text-light);
}

.display-6 {
  font-size: 2.7em;
}

/* Buttons */
.btn-gold {
  background-color: var(--primary-gold);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: #b08d4b;
  color: white;
  transform: translateY(-2px);
}

.text-soft-gray {
  color: #C2C2C2;
}

/* Animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards;
}

.top {
  background-color: #25252571;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.top span {
  font-size: 0.8em;
}

.city {
  background-color: #b08d4b;
  color: #fff;
  font-size: 1.1em !important;
  font-weight: 400;
  padding: 14px 10px;
}

.offcanvas .mobile .btn-newregister {
  background-color: #b08d4b;
  color: #000;
}

.offcanvas .mobile .btn-newregister i {
  color: #000;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Typography Helpers */
.display-4 {
  font-weight: 700;
}

.lead {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .top {
    display: none;
  }

  h1 {
    font-size: 2.8em;
  }

  .lead {
    font-size: 1em;
  }

  .display-6 {
    font-size: 2.4em;
  }

  footer img.w-75 {
    margin: 0px auto !important;
    display: block;
  }

  .hero {
    min-height: 100vh;
    padding: 20px 0px;
  }
}