/*
  Global stylesheet for True Journeys multi‑page site
  This file defines the colour palette, typography and core layout
  utilities used across all pages. It also includes basic animation
  definitions for reveal effects and card hover interactions.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

:root {
  --primary: #1e7c6e;
  --secondary: #2fb69b;
  --accent: #f3d26b;
  --dark: #202124;
  --light: #f7faf9;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--light);
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a:hover {
  color: var(--secondary);
}

/* Header & navigation */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.nav-logo img {
  height: 48px;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

nav a {
  font-weight: 600;
}

/* Hero banner */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60vh;
  color: #fff;
  padding: 5rem 1.5rem;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(30,124,110,0.95), rgba(47,182,155,0.95));
  z-index: -1;
  animation: gradientMove 15s ease-in-out infinite alternate;
}

@keyframes gradientMove {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.hero h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  max-width: 650px;
}

/* CTA buttons */
.cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--dark);
}

.btn-primary:hover {
  background: #d2b55e;
}

.btn-secondary {
  background: var(--primary);
  color: #fff;
}

.btn-secondary:hover {
  background: #145c50;
}

/* Section layout */
.section {
  padding: 4rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 0.5rem;
}

.divider {
  height: 4px;
  width: 80px;
  background: linear-gradient(90deg, #d8b35b, #f3d26b);
  border-radius: 10px;
  margin: 0 auto 2rem;
}

/* Two column layouts */
.two-column {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

.two-column .text {
  flex: 1 1 50%;
}

.two-column .image {
  flex: 1 1 40%;
  text-align: center;
}

.two-column .image img {
  max-width: 100%;
  border-radius: 12px;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.card {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card h3 {
  margin-bottom: 0.75rem;
  font-family: 'Poppins', sans-serif;
  color: var(--primary);
}

.card p {
  color: var(--dark);
  margin-bottom: 1rem;
}

.card ul {
  list-style: disc;
  margin-left: 1rem;
  padding-left: 0;
}

.card ul li {
  margin-bottom: 0.5rem;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
footer {
  background: #0f1413;
  color: #bbc7c3;
  text-align: center;
  padding: 2rem 1.5rem;
}

footer a {
  color: var(--secondary);
}