<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title><?= htmlspecialchars($title ?? 'Wipe Tears Africa') ?> | <?= htmlspecialchars($tagline ?? '') ?></title>

  <meta name="description" content="<?= htmlspecialchars($description ?? '') ?>">
  <meta name="keywords" content="<?= htmlspecialchars($keywords ?? '') ?>">
  <meta name="author" content="LWEGATECH">

  <!-- Open Graph -->
  <meta property="og:title" content="<?= htmlspecialchars($title ?? '') ?>">
  <meta property="og:description" content="<?= htmlspecialchars($description ?? '') ?>">
  <meta property="og:image" content="<?= htmlspecialchars($featured_image ?? '') ?>">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://wipetearsafrica.org">

 

  <!-- Favicons -->
  <link rel="icon" href="assets/images/favicon.png" type="image/png">
  <link rel="apple-touch-icon" href="assets/images/apple-icon.png">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&family=Quicksand:wght@300;400;600;700&display=swap" rel="stylesheet">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/vendor/bootstrap-icons/font/bootstrap-icons.min.css">

  <!-- Font Awesome (LOCAL – keep one only) -->
  <link rel="stylesheet" href="assets/vendor/fontawesome/css/fontawesome.min.css">
  <link rel="stylesheet" href="assets/vendor/fontawesome/css/brands.min.css">
  <link rel="stylesheet" href="assets/vendor/fontawesome/css/solid.min.css">

  <!-- AOS Animation -->
  <link rel="stylesheet" href="assets/vendor/aos/aos.css">

  <!-- Swiper -->
  <link rel="stylesheet" href="assets/vendor/swiper/swiper.min.css">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="assets/css/animate.css">
  <link rel="stylesheet" href="assets/css/custom.css">

  <!-- Tailwind (OK to coexist, scoped by classes) -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- jQuery (before custom JS) -->
  <script src="assets/vendor/jquery/jquery-3.7.1.min.js"></script>

  <!-- Google reCAPTCHA -->
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>

</a>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>


