/* ============ FOOTER SECTION ============ */
/* SECTION: SOCIAL-ICONS */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(184,157,99,0.3);
  transition: all var(--transition-fast);
}

.social-icon:hover {
  border-color: var(--brass);
  background: rgba(184,157,99,0.1);
}

.social-icon i {
  color: var(--brass) !important;
  font-size: 1.5rem;
  font-weight: 900;
}

/* SECTION: FOOTER-LINKS */
.footer-link {
  color: rgba(10,10,15,0.7);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--brass);
}

.fa-x-twitter {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  color: var(--brass) !important;
}

/* ============ NEW: BUTTON COMPONENTS ============ */
/* SECTION: BUTTONS-PRIMARY */
.btn-primary {
  display: inline-block;
  background: var(--redpower);
  color: white;
  padding: 1rem 2.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  transition: all var(--transition-fast);
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary:hover {
  background: var(--reddeep);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(196,30,58,0.3);
  color: white;
}

.btn-primary:active {
  transform: translateY(0);
}

/* SECTION: BUTTONS-SECONDARY */
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--redpower);
  padding: 0.875rem 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--redpower);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--red-light);
  border-color: var(--reddeep);
  color: var(--reddeep);
}

/* SECTION: TEXT-LINKS */
.text-link-red {
  color: var(--redpower);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--transition-fast);
}

.text-link-red:hover {
  color: var(--brass);
  gap: 0.75rem;
}

.text-link-red i {
  font-size: 0.6rem;
  transition: transform var(--transition-fast);
}

.text-link-red:hover i {
  transform: translateX(4px);
}