<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>About Us — Eri Travel Consult</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js" defer></script>
<style>
  :root {
    --emerald: #059669;
    --emerald-light: #10b981;
    --emerald-dark: #047857;
    --orange: #ea580c;
    --orange-light: #f97316;
    --gold: #d4af37;
    --gold-light: #e8c84a;
    --black: #0a0a0a;
    --charcoal: #111827;
    --charcoal-2: #1f2937;
    --charcoal-3: #374151;
    --white: #ffffff;
    --text-muted: #9ca3af;
    --text-light: #d1d5db;
  }
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'DM Sans', sans-serif; background: var(--black); color: var(--white); overflow-x: hidden; }
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--black); }
  ::-webkit-scrollbar-thumb { background: var(--emerald); border-radius: 3px; }

  /* NAV */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 0 5%; display: flex; align-items: center; justify-content: space-between;
    height: 80px; transition: all 0.4s ease;
    background: rgba(10,10,10,0.95); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(5,150,105,0.2);
  }
  .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .nav-logo-icon {
    width: 70px;
    height: 70px;
    background: #000;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.nav-logo-icon img {
    width: 200px;
    height: 200px;
    object-fit: contain;

    transform: translate(4px, 7px);
}
  .nav-logo-text span:first-child {
    display: block; font-family: 'Cormorant Garamond', serif;
    font-size: 20px; font-weight: 700; color: white; letter-spacing: 1px;
  }
  .nav-logo-text span:last-child { font-size: 9px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; }
  .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
  .nav-links a {
    text-decoration: none; color: rgba(255,255,255,0.8);
    font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
    font-weight: 500; transition: color 0.3s; position: relative;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a:hover::after { width: 100%; }
  .nav-links a.active { color: var(--gold); }
  .nav-links a.active::after { width: 100%; }
  .nav-cta {
    background: linear-gradient(135deg, var(--orange), var(--orange-light));
    color: white !important; padding: 12px 28px; border-radius: 2px;
    font-weight: 600 !important; letter-spacing: 1px !important;
    transition: all 0.3s ease !important; box-shadow: 0 4px 20px rgba(234,88,12,0.3);
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(234,88,12,0.5) !important; }
  .nav-cta::after { display: none !important; }
  .nav-hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
  .nav-hamburger span { width: 24px; height: 2px; background: white; display: block; }

  /* PAGE HERO */
  .page-hero {
    position: relative; padding: 180px 8% 120px;
    overflow: hidden; text-align: center;
  }
  .page-hero-bg {
    position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1488085061387-422e29b40080?w=1920&q=80');
    background-size: cover; background-position: center;
    filter: brightness(0.2);
  }
  .page-hero-content { position: relative; z-index: 2; }
  .page-hero-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 20px;
  }
  .page-hero-label::before, .page-hero-label::after {
    content: ''; flex: 0 0 30px; height: 1px; background: var(--gold);
  }
  .page-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(52px, 7vw, 92px);
    font-weight: 300; line-height: 1.05; color: white;
    animation: fadeInUp 0.8s ease both;
  }
  .page-hero-title em { font-style: italic; color: var(--emerald-light); }
  .page-hero-sub {
    font-size: 17px; color: rgba(255,255,255,0.6);
    max-width: 580px; margin: 20px auto 0;
    line-height: 1.7; font-weight: 300;
    animation: fadeInUp 0.8s ease 0.2s both;
  }
  .breadcrumb {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 36px; font-size: 12px;
    letter-spacing: 1px; color: rgba(255,255,255,0.4);
    animation: fadeInUp 0.8s ease 0.4s both;
  }
  .breadcrumb a { color: var(--emerald-light); text-decoration: none; }
  .breadcrumb span { color: var(--gold); }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* SHARED */
  section { padding: 120px 8%; }
  .section-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--emerald-light); font-weight: 600; margin-bottom: 20px;
  }
  .section-label::before, .section-label::after {
    content: ''; flex: 0 0 30px; height: 1px; background: var(--emerald);
  }
  .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 4vw, 58px); font-weight: 300; line-height: 1.1; color: white;
  }
  .section-title em { font-style: italic; color: var(--emerald-light); }
  .section-subtitle { font-size: 15px; color: var(--text-muted); line-height: 1.8; font-weight: 300; margin-top: 14px; }
  .section-header { text-align: center; }
  .section-header .section-subtitle { max-width: 560px; margin: 14px auto 0; }

  /* STORY SECTION */
  .story {
    background: var(--black);
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  }
  .story-image { position: relative; }
  .story-img-main {
    width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; display: block;
  }
  .story-img-accent {
    position: absolute; bottom: -28px; right: -28px;
    width: 200px; aspect-ratio: 1; object-fit: cover;
    border-radius: 4px; border: 6px solid var(--black);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  }
  .story-badge {
    position: absolute; top: 32px; left: -24px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    padding: 20px 24px; border-radius: 4px; text-align: center;
    box-shadow: 0 16px 40px rgba(212,175,55,0.3);
  }
  .story-badge-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px; font-weight: 700; color: var(--black); line-height: 1;
  }
  .story-badge-text { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--black); opacity: 0.7; margin-top: 4px; }
  .story-content {}
  .story-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px; font-style: italic; color: white;
    line-height: 1.4; padding-left: 24px;
    border-left: 3px solid var(--emerald); margin: 28px 0;
  }
  .story-text { font-size: 15px; color: var(--text-muted); line-height: 1.9; font-weight: 300; margin-bottom: 16px; }
  .story-stats {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 40px;
  }
  .story-stat {
    padding: 24px 20px; background: var(--charcoal); border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05); text-align: center; position: relative; overflow: hidden;
  }
  .story-stat::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--emerald), var(--orange));
  }
  .story-stat-num {
    font-family: 'Cormorant Garamond', serif; font-size: 42px;
    font-weight: 700; color: var(--gold); line-height: 1;
  }
  .story-stat-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }

  /* TIMELINE */
  .timeline { background: var(--charcoal); }
  .timeline-wrap { position: relative; margin-top: 70px; padding-left: 40px; }
  .timeline-wrap::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(to bottom, var(--emerald), var(--orange), var(--gold));
    border-radius: 2px;
  }
  .timeline-item {
    position: relative; padding: 0 0 64px 48px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-item:nth-child(even) .timeline-content { order: -1; text-align: right; }
  .timeline-item:nth-child(even) .timeline-visual { order: 1; }
  .timeline-dot {
    position: absolute; left: -48px; top: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--emerald); border: 3px solid var(--black);
    box-shadow: 0 0 0 3px var(--emerald), 0 0 20px rgba(5,150,105,0.4);
    z-index: 1;
  }
  .timeline-year {
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px; font-weight: 700; color: rgba(255,255,255,0.06);
    line-height: 1; margin-bottom: -10px; display: block;
    pointer-events: none; user-select: none;
  }
  .timeline-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px; font-weight: 600; color: white; margin-bottom: 12px;
  }
  .timeline-text { font-size: 14px; color: var(--text-muted); line-height: 1.8; font-weight: 300; }
  .timeline-tag {
    display: inline-block; margin-top: 14px;
    background: rgba(5,150,105,0.12); border: 1px solid rgba(5,150,105,0.25);
    color: var(--emerald-light); padding: 5px 14px;
    border-radius: 2px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  }
  .timeline-visual img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
    border-radius: 4px; display: block;
    border: 1px solid rgba(255,255,255,0.06);
  }

  /* TEAM */
  .team { background: var(--black); }
  .team-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; margin-top: 60px;
  }
  .team-card {
    background: var(--charcoal); border-radius: 4px;
    overflow: hidden; position: relative;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.4s ease;
  }
  .team-card:hover { transform: translateY(-8px); border-color: rgba(5,150,105,0.3); }
  .team-img-wrap { position: relative; overflow: hidden; }
  .team-img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
    transition: transform 0.5s ease;
  }
  .team-card:hover .team-img { transform: scale(1.05); }
  .team-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    display: flex; align-items: flex-end; padding: 20px;
    opacity: 0; transition: opacity 0.4s;
  }
  .team-card:hover .team-overlay { opacity: 1; }
  .team-socials { display: flex; gap: 10px; }
  .team-social {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 13px; text-decoration: none;
    transition: background 0.3s;
  }
  .team-social:hover { background: var(--emerald); }
  .team-body { padding: 24px 20px; }
  .team-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 600; color: white; margin-bottom: 4px;
  }
  .team-role { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--emerald-light); margin-bottom: 12px; }
  .team-bio { font-size: 13px; color: var(--text-muted); line-height: 1.6; font-weight: 300; }
  .team-featured {
    grid-column: span 2;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  }
  .team-featured .team-img { aspect-ratio: auto; height: 100%; }
  .team-featured .team-body { padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; }
  .team-featured .team-name { font-size: 32px; }
  .team-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; font-style: italic; color: rgba(255,255,255,0.6);
    line-height: 1.5; margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  /* PHILOSOPHY */
  .philosophy { background: var(--charcoal); text-align: center; }
  .philosophy-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 2px; margin-top: 60px;
  }
  .philosophy-card {
    background: var(--charcoal-2); padding: 60px 40px;
    position: relative; overflow: hidden;
    transition: all 0.4s ease; border: 1px solid rgba(255,255,255,0.04);
  }
  .philosophy-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(5,150,105,0.08), transparent);
    opacity: 0; transition: opacity 0.4s;
  }
  .philosophy-card:hover::before { opacity: 1; }
  .philosophy-card:hover { transform: translateY(-6px); }
  .philosophy-num {
    font-family: 'Cormorant Garamond', serif; font-size: 80px; font-weight: 700;
    color: rgba(255,255,255,0.04); position: absolute; top: 20px; right: 24px; line-height: 1;
  }
  .philosophy-icon {
    width: 64px; height: 64px; margin: 0 auto 28px;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-dark));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: white; box-shadow: 0 12px 30px rgba(5,150,105,0.3);
  }
  .philosophy-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: white; margin-bottom: 16px; }
  .philosophy-text { font-size: 14px; color: var(--text-muted); line-height: 1.8; font-weight: 300; }
  .values-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 60px; }
  .value-pill {
    display: flex; align-items: center; gap: 10px;
    background: var(--charcoal-2); border: 1px solid rgba(5,150,105,0.2);
    padding: 14px 24px; border-radius: 40px;
    font-size: 13px; color: var(--emerald-light); font-weight: 600;
    letter-spacing: 1px; transition: all 0.3s;
  }
  .value-pill i { color: var(--gold); }
  .value-pill:hover { background: var(--emerald); color: white; border-color: var(--emerald); transform: translateY(-3px); }

  /* PARTNERS */
  .partners { background: var(--black); }
  .partners-intro { max-width: 580px; }
  .partners-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 2px; margin-top: 60px;
  }
  .partner-card {
    background: var(--charcoal); padding: 36px 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.3s ease; text-align: center;
  }
  .partner-card:hover { background: var(--charcoal-2); border-color: rgba(5,150,105,0.2); transform: translateY(-3px); }
  .partner-icon { font-size: 28px; color: var(--text-muted); transition: color 0.3s; }
  .partner-card:hover .partner-icon { color: var(--emerald-light); }
  .partner-name { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; transition: color 0.3s; }
  .partner-card:hover .partner-name { color: white; }
  .partner-type { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.2); }

  /* CTA */
  .about-cta {
    position: relative; padding: 120px 8%; text-align: center; overflow: hidden;
  }
  .about-cta::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1920&q=80');
    background-size: cover; background-position: center; filter: brightness(0.2);
  }
  .about-cta-content { position: relative; z-index: 2; }
  .about-cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(40px, 5vw, 72px); font-weight: 300; color: white; line-height: 1.1;
  }
  .about-cta-title em { font-style: italic; color: var(--gold); }
  .about-cta-sub { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 480px; margin: 20px auto 44px; line-height: 1.7; font-weight: 300; }
  .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .btn-primary {
    background: linear-gradient(135deg, var(--emerald), var(--emerald-dark));
    color: white; padding: 16px 40px; font-size: 13px; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 600; border: none; cursor: pointer;
    border-radius: 2px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    transition: all 0.3s ease; box-shadow: 0 8px 30px rgba(5,150,105,0.3);
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(5,150,105,0.5); }
  .btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--black); padding: 16px 40px; font-size: 13px; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 700; border: none; cursor: pointer;
    border-radius: 2px; text-decoration: none; transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(212,175,55,0.3);
  }
  .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(212,175,55,0.5); }

  /* FOOTER */
  footer { background: #070707; border-top: 1px solid rgba(255,255,255,0.06); padding: 80px 8% 0; }
  .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .footer-logo-icon {
    width: 70px;
    height: 70px;
    background: #000;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.footer-logo-icon img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;

    transform: translate(4px, 7px);
}
  .footer-brand { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: white; }
  .footer-brand span { display: block; font-size: 9px; letter-spacing: 3px; color: var(--gold); font-family: 'DM Sans', sans-serif; text-transform: uppercase; margin-top: 2px; }
  .footer-about { font-size: 14px; color: var(--text-muted); line-height: 1.7; font-weight: 300; max-width: 280px; }
  .footer-socials { display: flex; gap: 12px; margin-top: 28px; }
  .social-icon { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; text-decoration: none; transition: all 0.3s; }
  .social-icon:hover { background: var(--emerald); border-color: var(--emerald); color: white; transform: translateY(-3px); }
  .footer-col-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: white; margin-bottom: 24px; position: relative; padding-bottom: 14px; }
  .footer-col-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--emerald), var(--orange)); }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .footer-links a { text-decoration: none; color: var(--text-muted); font-size: 14px; transition: all 0.3s; display: flex; align-items: center; gap: 8px; }
  .footer-links a::before { content: '›'; color: var(--emerald); font-size: 16px; }
  .footer-links a:hover { color: var(--emerald-light); padding-left: 4px; }
  .footer-contact-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
  .footer-contact-item i { color: var(--emerald-light); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
  .footer-contact-item span { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
  .footer-bottom { padding: 24px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .footer-copy { font-size: 13px; color: var(--text-muted); }
  .footer-legal { display: flex; gap: 24px; }
  .footer-legal a { font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.3s; }
  .footer-legal a:hover { color: var(--emerald-light); }
  .footer-dev-divider { border: none; border-top: 1px solid rgba(255,255,255,0.04); margin: 0; }
  .footer-dev { padding: 20px 8%; text-align: center; background: #050505; font-size: 12px; color: rgba(255,255,255,0.3); letter-spacing: 0.5px; }
  .footer-dev a { color: var(--emerald-light); text-decoration: none; font-weight: 600; transition: color 0.3s; }
  .footer-dev a:hover { color: var(--gold); }
  .footer-dev .heart { color: var(--orange); }

  /* WHATSAPP */
  .whatsapp-fab {
    position: fixed; bottom: 32px; right: 32px; z-index: 999;
    width: 58px; height: 58px; border-radius: 50%; background: #25d366;
    box-shadow: 0 8px 30px rgba(37,211,102,0.4);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 26px; text-decoration: none;
    transition: all 0.3s ease; animation: pulse-green 2s infinite;
  }
  .whatsapp-fab:hover { transform: scale(1.1); }
  @keyframes pulse-green {
    0%, 100% { box-shadow: 0 8px 30px rgba(37,211,102,0.4); }
    50% { box-shadow: 0 8px 40px rgba(37,211,102,0.7); }
  }

  /* REVEAL */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  @media (max-width: 1100px) {
    .team-grid { grid-template-columns: repeat(2,1fr); }
    .team-featured { grid-column: span 2; }
    .partners-grid { grid-template-columns: repeat(3,1fr); }
  }
  @media (max-width: 900px) {
    .nav-links, .nav-cta { display: none; }
    .nav-hamburger { display: flex; }
    .story { grid-template-columns: 1fr; padding: 80px 6%; }
    .story-image { display: none; }
    .philosophy-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .team-featured { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .timeline-item { grid-template-columns: 1fr; }
    .timeline-item:nth-child(even) .timeline-content { order: 0; text-align: left; }
    .timeline-visual { display: none; }
    section { padding: 80px 6%; }
  }
  @media (max-width: 600px) {
    .team-grid { grid-template-columns: 1fr; }
    .team-featured { grid-column: span 1; grid-template-columns: 1fr; }
    .partners-grid { grid-template-columns: repeat(2,1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
  }
</style>
</head>
<body>

<!-- NAV -->
<nav>
  <a href="index.php" class="nav-logo">
    <div class="nav-logo-icon"><img src="img/eri_travel_logo.png" style="width:250px" alt="eri travel logo"></div>
    <div class="nav-logo-text">
      <span>Eri Travel Consult</span>
      <span>Luxury Travel • Est. 2022</span>
    </div>
  </a>
  <ul class="nav-links">
    <li><a href="index.php">Home</a></li>
    <li><a href="destinations.php">Destinations</a></li>
    <li><a href="services.php">Services</a></li>
    <li><a href="about.php" class="active">About Us</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="contact.php">Contact</a></li>
    <li><a href="https://shop.eritravelconsult.com/">Our shop</a></li>
    <li><a href="https://wa.me/2347031034668" class="nav-cta">Plan My Trip</a></li>
  </ul>
  <div class="nav-hamburger"><span></span><span></span><span></span></div>
</nav>

<!-- PAGE HERO -->
<div class="page-hero">
  <div class="page-hero-bg"></div>
  <div class="page-hero-content">
    <div class="page-hero-label">Our Story</div>
    <h1 class="page-hero-title">Crafting Journeys.<br><em>Building Legacies.</em></h1>
    <p class="page-hero-sub">We are more than a travel agency. We create opportunities, connect people to the world, and deliver exceptional travel experiences built on trust, professionalism, and a genuine passion for helping our clients explore without limits.
    </p>
    <div class="breadcrumb">
      <a href="index.php">Home</a>
      <span>›</span>
      <span style="color:rgba(255,255,255,0.5)">About Us</span>
    </div>
  </div>
</div>

<!-- STORY -->
<section class="story" id="story">
  <div class="story-image reveal">
    <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=700&q=80" alt="Luxury Travel" class="story-img-main"/>
    <div class="story-badge">
      <div class="story-badge-num">4+</div>
      <div class="story-badge-text">Years of<br>Trusted Service</div>

    </div>
    <img src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=300&q=80" alt="Luxury Hotel" class="story-img-accent"/>
  </div>
  <div class="reveal reveal-delay-1">
    <div class="section-label">Who We Are</div>
    <h2 class="section-title">Born From a Belief<br>That Travel Is <em>Sacred.</em></h2>
    <blockquote class="story-quote">
      "Travel is one of life's greatest privileges — and it deserves to be experienced without limits."
    </blockquote>
    <p class="story-text">
      Eri Travel Consult was founded in 2022 in Anambra State Nigeria, with a simple but powerful mission: to make world-class travel accessible, seamless, and unforgettable. From the very beginning, we set out to redefine what travelers should expect from a travel consultancy — combining expert guidance, personalized service, and meticulous attention to detail.
    </p>
    
    <p class="story-text">
      Today, we proudly serve individuals, families, business professionals, and organizations across Nigeria and beyond. Whether it's a luxury getaway, a corporate trip, visa assistance, educational travel, or a carefully curated vacation experience, our team is committed to delivering journeys that are stress-free, memorable, and tailored to each client's unique needs. At Eri Travel Consult, we don't just arrange travel — we create experiences that inspire confidence, comfort, and lasting memories.
    </p>

    <div class="story-stats">
         <div class="story-stat reveal">
        <div class="story-stat-num" data-count="3">4+</div>
        <div class="story-stat-label">Years of Excellence</div>
    </div>
    
    <div class="story-stat reveal reveal-delay-1">
        <div class="story-stat-num" data-count="1000">1K+</div>
        <div class="story-stat-label">Satisfied Travelers</div>
    </div>
    
    <div class="story-stat reveal reveal-delay-2">
        <div class="story-stat-num" data-count="20">20+</div>
        <div class="story-stat-label">Travel Destinations</div>
    </div>
    
    <div class="story-stat reveal reveal-delay-3">
        <div class="story-stat-num">24/7</div>
        <div class="story-stat-label">Customer Support</div>
    </div>

    </div>
  </div>
</section>

<!-- TIMELINE -->
<section class="timeline">
  <div class="section-header">
    <div class="section-label">Our Journey</div>
    <h2 class="section-title">Our Path to <em>Trusted Travel</em></h2>
    <p class="section-subtitle">From our beginnings in Anambra to helping clients explore the world with confidence — here’s how Eri Travel Consult continues to grow.</p>
  </div>

  <div class="timeline-wrap">


<div class="timeline-item reveal">
  <div class="timeline-dot"></div>
  <div class="timeline-content">
    <span class="timeline-year">2022</span>
    <h3 class="timeline-title">Where It All Began</h3>
    <p class="timeline-text">Eri Travel Consult was founded in Anambra Nigeria with a clear mission — to make travel planning, visa guidance, flight bookings, and tour experiences simpler, safer, and more reliable for clients.</p>
    <span class="timeline-tag">Founded</span>
  </div>
  <div class="timeline-visual">
    <img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=600&q=80" alt="Eri Travel founded in 2022"/>
  </div>
</div>

<div class="timeline-item reveal">
  <div class="timeline-dot" style="background: var(--orange);box-shadow:0 0 0 3px var(--orange),0 0 20px rgba(234,88,12,0.4)"></div>
  <div class="timeline-visual">
    <img src="https://images.unsplash.com/photo-1488085061387-422e29b40080?w=600&q=80" alt="Eri Travel service growth"/>
  </div>
  <div class="timeline-content">
    <span class="timeline-year">2023</span>
    <h3 class="timeline-title">Growing Client Trust</h3>
    <p class="timeline-text">Through consistent service, honest guidance, and attention to detail, Eri Travel Consult began earning the trust of individuals, families, students, business travelers, and holiday seekers.</p>
    <span class="timeline-tag" style="border-color:rgba(234,88,12,0.3);background:rgba(234,88,12,0.1);color:var(--orange-light)">Growth</span>
  </div>
</div>

<div class="timeline-item reveal">
  <div class="timeline-dot" style="background:var(--gold);box-shadow:0 0 0 3px var(--gold),0 0 20px rgba(212,175,55,0.4)"></div>
  <div class="timeline-content">
    <span class="timeline-year">2024</span>
    <h3 class="timeline-title">Expanding Our Travel Services</h3>
    <p class="timeline-text">We strengthened our service offerings across visa assistance, international travel consultation, flight reservations, hotel bookings, vacation planning, study travel support, and guided tour packages.</p>
    <span class="timeline-tag" style="border-color:rgba(212,175,55,0.3);background:rgba(212,175,55,0.1);color:var(--gold)">Expansion</span>
  </div>
  <div class="timeline-visual">
    <img src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=600&q=80" alt="Travel service expansion"/>
  </div>
</div>

<div class="timeline-item reveal">
  <div class="timeline-dot"></div>
  <div class="timeline-visual">
    <img src="img/visa_assitance.jpg?w=600&q=80" alt="Professional travel consultation"/>
  </div>
  <div class="timeline-content">
    <span class="timeline-year">2025</span>
    <h3 class="timeline-title">Building a Stronger Travel Brand</h3>
    <p class="timeline-text">With more clients relying on our expertise, we continued improving our process, communication, and travel support system — ensuring every client receives clear guidance from inquiry to arrival.</p>
    <span class="timeline-tag">Brand Growth</span>
  </div>
</div>

<div class="timeline-item reveal">
  <div class="timeline-dot" style="background:var(--orange);box-shadow:0 0 0 3px var(--orange),0 0 20px rgba(234,88,12,0.4)"></div>
  <div class="timeline-content">
    <span class="timeline-year">Today</span>
    <h3 class="timeline-title">Your Trusted Travel Partner</h3>
    <p class="timeline-text">Today, Eri Travel Consult continues to help clients travel smarter, plan better, and experience the world with confidence. From Anambra Nigeria to global destinations, our commitment remains simple — reliable travel support, every step of the way.</p>
    <span class="timeline-tag" style="border-color:rgba(234,88,12,0.3);background:rgba(234,88,12,0.1);color:var(--orange-light)">Trusted Partner</span>
  </div>
  <div class="timeline-visual">
    <img src="https://images.unsplash.com/photo-1527631746610-bca00a040d60?w=600&q=80" alt="Eri Travel today"/>
  </div>
</div>


  </div>
</section>


<!-- TEAM -->
<section class="team" id="team">
  <div class="section-header">
    <div class="section-label">The People Behind the Magic</div>
    <h2 class="section-title">Meet Our <em>Team</em></h2>
    <p class="section-subtitle">Passionate travel specialists, destination experts, and client-obsessed professionals — united by one mission.</p>
  </div>
  
  <div class="team-grid">

    
    <!-- Featured: CEO -->
    <div class="team-card team-featured reveal">
      <div class="team-img-wrap">
        <img src="img/ceo_eritravelsconsult_onitsha.jpeg?w=500&q=80" alt="CEO ERi Travel Consult Onitsha" class="team-img"/>
      </div>
      <div class="team-body">
        <div class="team-role">Founder & Chief Executive Officer</div>
        <div class="team-name">Arthur Echezona Onwuteaka</div>
        <p class="team-bio">
          Arthur Echezona Onwuteaka is the founder and driving force behind Eri Travel Consult. With a passion for helping people explore opportunities beyond borders, he established the company to provide reliable travel solutions, visa assistance, flight reservations, study travel support, and personalized travel experiences. His commitment to professionalism, integrity, and exceptional customer service has positioned Eri Travel Consult as a trusted partner for individuals, families, students, and business travelers seeking seamless travel experiences.
        </p>
        <p class="team-quote">
          "Travel is more than reaching a destination — it's about opening doors to new opportunities, experiences, and possibilities."
        </p>
        <div class="team-socials" style="margin-top:20px;">
          <a href="#" class="team-social"><i class="fab fa-linkedin-in"></i></a>
          <a href="https://wa.me/2347031034668" class="team-social"><i class="fab fa-whatsapp"></i></a>
        </div>
      </div>
    </div>
    
    <div class="team-card reveal reveal-delay-1">
      <div class="team-img-wrap">
        <img src="img/head_of_operation.jpeg?w=400&q=80" alt="Operations" class="team-img"/>
        <div class="team-overlay">
          <div class="team-socials">
            <a href="#" class="team-social"><i class="fab fa-linkedin-in"></i></a>
            <a href="#" class="team-social"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
      </div>
      <div class="team-body">
        <div class="team-role">Head of Operations</div>
        <div class="team-name">Chidiadi Eugenia</div>
        <p class="team-bio">
          Eugenia oversees the day-to-day operations that keep Eri Travel Consult running smoothly. From coordinating travel arrangements and managing client requests to ensuring service quality and operational efficiency, she plays a key role in delivering the seamless and stress-free travel experiences our clients have come to expect.
        </p>
      </div>
    </div>
    
    
    </div>

</section>

<!-- PHILOSOPHY -->
<section class="philosophy">
  <div class="section-label">Company Standards</div>
  <h2 class="section-title">The Principles That <em>Define</em> Us</h2>
  <p class="section-subtitle" style="max-width:560px;margin:14px auto 0;">Everything we do is rooted in a philosophy of excellence, integrity, and genuine human connection.</p>
  <div class="philosophy-grid">
    <div class="philosophy-card reveal">
      <div class="philosophy-num">01</div>
      <div class="philosophy-icon"><i class="fas fa-book-open"></i></div>
      <div class="philosophy-title">Our Philosophy</div>
      <p class="philosophy-text">"Travel is not an expense — it is an investment in the person you are becoming." We hold ourselves to the highest standards of professionalism, creativity, and care. Your trust is not taken lightly — it is earned, every single day.</p>
    </div>
    <div class="philosophy-card reveal reveal-delay-1">
      <div class="philosophy-num">02</div>
      <div class="philosophy-icon"><i class="fas fa-bullseye"></i></div>
      <div class="philosophy-title">Our Goal</div>
      <p class="philosophy-text">To become Africa's most celebrated luxury travel consultancy — expanding the horizons of our clients while setting the gold standard for what personalized travel service can and should be. A legacy, not just a business.</p>
    </div>
    <div class="philosophy-card reveal reveal-delay-2">
      <div class="philosophy-num">03</div>
      <div class="philosophy-icon"><i class="fas fa-heart"></i></div>
      <div class="philosophy-title">What We Stand For</div>
      <p class="philosophy-text">Integrity in every conversation. Excellence at every touchpoint. Inclusion for every dreamer. Innovation in every solution. And people above all else. Your joy, safety, and total satisfaction are our only true measure of success.</p>
    </div>
  </div>
  <div class="values-row">
    <div class="value-pill reveal"><i class="fas fa-handshake"></i> Integrity</div>
    <div class="value-pill reveal reveal-delay-1"><i class="fas fa-star"></i> Excellence</div>
    <div class="value-pill reveal reveal-delay-2"><i class="fas fa-globe-africa"></i> Inclusion</div>
    <div class="value-pill reveal reveal-delay-3"><i class="fas fa-lightbulb"></i> Innovation</div>
    <div class="value-pill reveal reveal-delay-4"><i class="fas fa-heart"></i> People First</div>
  </div>
</section>

<!-- PARTNERS -->
<section class="partners">
  <div class="section-header">
    <div class="section-label">Trusted Partners</div>
    <h2 class="section-title">Airlines & Partners<br>We <em>Work With</em></h2>
    <p class="section-subtitle" style="max-width:560px;margin:14px auto 0;">We partner only with the world's finest airlines, hotel chains, and travel providers — so you always get the best.</p>
  </div>
  <div class="partners-grid">
    <div class="partner-card reveal">
      <div class="partner-icon"><i class="fas fa-plane"></i></div>
      <div class="partner-name">Emirates</div>
      <div class="partner-type">Airline Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-1">
      <div class="partner-icon"><i class="fas fa-plane-departure"></i></div>
      <div class="partner-name">Qatar Airways</div>
      <div class="partner-type">Airline Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-2">
      <div class="partner-icon"><i class="fas fa-plane-arrival"></i></div>
      <div class="partner-name">Turkish Airlines</div>
      <div class="partner-type">Airline Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-1">
      <div class="partner-icon"><i class="fas fa-plane"></i></div>
      <div class="partner-name">British Airways</div>
      <div class="partner-type">Airline Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-2">
      <div class="partner-icon"><i class="fas fa-plane-departure"></i></div>
      <div class="partner-name">Lufthansa</div>
      <div class="partner-type">Airline Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-3">
      <div class="partner-icon"><i class="fas fa-plane-arrival"></i></div>
      <div class="partner-name">Air France</div>
      <div class="partner-type">Airline Partner</div>
    </div>
    <div class="partner-card reveal">
      <div class="partner-icon"><i class="fas fa-hotel"></i></div>
      <div class="partner-name">Marriott</div>
      <div class="partner-type">Hotel Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-1">
      <div class="partner-icon"><i class="fas fa-hotel"></i></div>
      <div class="partner-name">Hilton Hotels</div>
      <div class="partner-type">Hotel Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-2">
      <div class="partner-icon"><i class="fas fa-concierge-bell"></i></div>
      <div class="partner-name">Four Seasons</div>
      <div class="partner-type">Hotel Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-1">
      <div class="partner-icon"><i class="fas fa-concierge-bell"></i></div>
      <div class="partner-name">Ritz-Carlton</div>
      <div class="partner-type">Hotel Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-2">
      <div class="partner-icon"><i class="fas fa-passport"></i></div>
      <div class="partner-name">VFS Global</div>
      <div class="partner-type">Visa Partner</div>
    </div>
    <div class="partner-card reveal reveal-delay-3">
      <div class="partner-icon"><i class="fas fa-shield-alt"></i></div>
      <div class="partner-name">AXA Travel</div>
      <div class="partner-type">Insurance Partner</div>
    </div>
  </div>
</section>

<!-- CTA -->
<div class="about-cta">
  <div class="about-cta-content">
    <div class="section-label" style="justify-content:center;">Start Your Journey</div>
    <h2 class="about-cta-title">Ready to Travel<br>in <em>True Style?</em></h2>
    <p class="about-cta-sub">Let our team of destination specialists craft the journey of your lifetime — tailored entirely to your vision.</p>
    <div class="cta-btns">
      <a href="https://wa.me/2347031034668" class="btn-gold">Plan My Trip Now</a>
      <a href="contact.php" class="btn-primary"><i class="fas fa-envelope"></i> Get In Touch</a>
    </div>
  </div>
</div>

<!-- FOOTER -->
<footer>
  <div class="footer-grid">
    <div>
      <div class="footer-logo">
        <div class="footer-logo-icon"><img src="img/eri_travel_logo.png" alt="eri travel logo"></div>
        <div>
          <div class="footer-brand">Eri Travel Consult<span>Luxury Travel • Est. 2022</span></div>
        </div>
      </div>
      <p class="footer-about">Your premier travel partner, creating unforgettable experiences around the globe. We don't just plan trips — we craft legacies.</p>
      <div class="footer-socials">
        <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-x-twitter"></i></a>
        <a href="https://wa.me/2347031034668" class="social-icon"><i class="fab fa-whatsapp"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>
    <div>
      <div class="footer-col-title">Quick Links</div>
      <ul class="footer-links">
        <li><a href="index.php">Home</a></li>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Blog & Tips</a></li>
        <li><a href="contact.php">Contact Us</a></li>
      </ul>
    </div>
    <div>
      <div class="footer-col-title">Our Services</div>
      <ul class="footer-links">
        <li><a href="#">Leisure Travel</a></li>
        <li><a href="#">Corporate Travel</a></li>
        <li><a href="#">Group Travel</a></li>
        <li><a href="#">Visa & Documentation</a></li>
        <li><a href="#">Hotel & Flight Booking</a></li>
        <li><a href="#">Concierge Services</a></li>
      </ul>
    </div>
    <div>
      <div class="footer-col-title">Get In Touch</div>
      <div class="footer-contact-item"><i class="fas fa-envelope"></i><span>info@eritravelconsult.com</span></div>
      <div class="footer-contact-item"><i class="fas fa-phone"></i><span>+234 703 103 4668</span></div>
      <div class="footer-contact-item"><i class="fas fa-map-marker-alt"></i><span>21 Oguta Road Onitsha, Anambra State, Nigeria</span></div>
      <div class="footer-contact-item"><i class="fas fa-clock"></i><span>Mon – Fri: 8:00 AM – 6:00 PM</span></div>
    </div>
  </div>
  <div class="footer-bottom">
    <p class="footer-copy">© 2025 Eri Travel Consult. All Rights Reserved.</p>
    <div class="footer-legal">
      <a href="privacy.php">Privacy Policy</a>
      <a href="terms.php">Terms & Conditions</a>
    </div>
  </div>
</footer>
<hr class="footer-dev-divider"/>
<div class="footer-dev">
  Developed with <span class="heart">❤️</span> by <a href="https://wa.me/2348105501971" target="_blank">Quantum Technologies</a> &nbsp;|&nbsp; Crafted for Luxury, Built for Experiences.
</div>

<a href="https://wa.me/2347031034668" class="whatsapp-fab" target="_blank"><i class="fab fa-whatsapp"></i></a>

<script>
  const revealEls = document.querySelectorAll('.reveal');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
  }, { threshold: 0.1 });
  revealEls.forEach(el => observer.observe(el));
</script>
</body>
</html>