/* ================================
   GLOBAL THEME VARIABLES
================================== */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("./assets/fonts/PP_Neue_Montreal-Regular/PPNeueMontreal-Regular.woff2") format("woff2"),
    url("./assets/fonts/PP_Neue_Montreal-Regular/PPNeueMontreal-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Writer";
  src: url("./assets/fonts/PP_Writer-Regular/PPWriter-Regular.woff2") format("woff2"),
    url("./assets/fonts/PP_Writer-Regular/PPWriter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Colors */
  --color-primary-navy: #0f172a;
  --color-primary-navy-light: #1e293b;
  --color-primary-navy-dark: #020617;

  --color-secondary-amber: #f59e0b;
  --color-secondary-amber-light: #fbbf24;
  --color-secondary-amber-dark: #d97706;

  --color-accent-terracotta: #dc2626;
  --color-accent-terracotta-light: #ef4444;
  --color-accent-terracotta-dark: #b91c1c;

  --color-accent-emerald: #059669;
  --color-accent-emerald-light: #10b981;
  --color-accent-emerald-dark: #047857;

  --color-accent-purple: #7c3aed;
  --color-accent-purple-light: #8b5cf6;
  --color-accent-purple-dark: #6d28d9;

  --color-accent-orange: #ea580c;
  --color-accent-orange-light: #f97316;
  --color-accent-orange-dark: #c2410c;

  /* Neutrals */
  --color-white: #ffffff;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* Typography */
  --font-sans: "PP Neue Montreal";
  --font-serif: "PP Writer", Georgia, Times, serif;

  /* Transitions */
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   GLOBAL UTILITY STYLES
================================== */

body {
  font-family: var(--font-sans);
  background-color: var(--color-white);
  color: var(--color-gray-900);
  scroll-behavior: smooth;
}

/* Headings */
.heading-display {
  /* font-family: var(--font-serif); */
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.heading-serif {
  /* font-family: var(--font-serif); */
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.4;
}

/* Text Utilities */
.body-text {
  font-family: var(--font-sans);
  line-height: 1.6;
}

.body-light {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
}

/* Gradients */
.gradient-navy {
  background: linear-gradient(135deg, var(--color-primary-navy), var(--color-primary-navy-light));
}

.gradient-amber {
  background: linear-gradient(135deg, var(--color-secondary-amber), var(--color-accent-orange));
}

.gradient-emerald {
  background: linear-gradient(135deg, var(--color-accent-emerald-dark), var(--color-accent-emerald));
}

.gradient-purple {
  background: linear-gradient(135deg, var(--color-accent-purple-dark), var(--color-accent-purple));
}

/* Animations */
.animate-fade-in {
  animation: fadeIn var(--transition-base) ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp var(--transition-base) ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom selection */
::selection {
  background-color: var(--color-secondary-amber);
  color: var(--color-primary-navy);
}

.icon-img {
  filter: brightness(0) invert(1);
}

/* ===== Partner Section ===== */
.hero-partner {
  position: relative;
  height: 100vh;
  background: url("./assets/images/earth.webp") center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: white;
  overflow: hidden;
}

.hero-partner .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4));
  z-index: 1;
}

.hero-partner .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 40px;
}

.hero-partner .flex-parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 50vh;
}

/* ===== Headings ===== */
.hero-partner h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  margin-bottom: 16px;
  color: white;
}

.hero-partner h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  margin-bottom: 0;
  color: white;
}

/* ===== Contact Links ===== */
.contact-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 48px;
}

.contact-links a {
  color: white;
  font-size: 1.125rem;
  font-weight: 500;
  opacity: 0.9;
  transition: color 0.3s ease;
}

.contact-links a:hover {
  color: #E59E3E;
}

.contact-links .divider {
  width: 2px;
  height: 20px;
  background-color: white;
  opacity: 0.5;
}

/* ===== Disclaimer ===== */
.disclaimer {
  max-width: 900px;
  margin: 0 auto;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.7;
  color: white;
  padding: 24px;
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade-up.delay-200 {
  transition-delay: 0.2s;
}

.fade-show {
  opacity: 1;
  transform: translateY(0);
}

/* Active tab styling */
.active-tab {
  background: linear-gradient(to bottom right, #F59E0B, #EA580C);
  color: #fff !important;
}

/* logo-carousel */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.logo-item {
  width: 180px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html, body, button, h1, h2, h3, h4, h5, h6, p, a, span {
  font-family: 'PP Neue Montreal' !important;
}
