from pathlib import Path

content = r'''<!-- Navbar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<style>
  .logo {
    cursor: pointer;
  }

  nav {
    background: #2c3e50;
  }

  .navbar-scroll .nav-link,
  .navbar-scroll .navbar-toggler-icon,
  .navbar-scroll .navbar-brand {
    color: #faf8f8;
  }

  .navbar-scrolled .nav-link,
  .navbar-scrolled .navbar-toggler-icon,
  .navbar-scroll .navbar-brand {
    color: #cfc615;
    font-family: 'bravecho', sans-serif;
  }

  .navbar-brand {
    font-size: unset;
    height: 3.5rem;
  }

  nav a {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }

  nav a:hover {
    background-color: #D96704;
  }

  .navbar {
    margin-bottom: 2rem;
    z-index: 1050;
  }

  .transparent {
    background-color: rgba(44, 62, 80, 0.64) !important;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .lang-flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
  }

  /* Desktop dropdown hover */
  @media (min-width: 992px) {
    .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
    }
  }
</style>

<!-- ================= DESKTOP NAVBAR ================= -->
<nav class="navbar navbar-expand-lg navbar-scroll fixed-top shadow-0 border-bottom border-dark d-none d-lg-block">
  <div class="container">

    <img src="media/logo/LOGO A1.webp"
      height="60"
      width="220"
      alt="2 days Toubkal trek"
      onclick="window.location.href='index.php'"
      class="logo">

    <button class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <i class="bi bi-list"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav ms-auto">

        <li class="nav-item">
          <a class="nav-link" href="index.php">HOME</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="trekking.php">TREKKING</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="ski.php">Ski Touring</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="running.php">Running Trail</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="bike.php">Biking Tours</a>
        </li>

        <!-- More Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle ms-3"
            href="#"
            id="moreDropdown"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false">
            More
          </a>

          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="shop.php">Toubkal Shop</a></li>
            <li><a class="dropdown-item" href="hotel/hotel.php">Imlil Hostel</a></li>
            <li><a class="dropdown-item" href="about.php">About Us</a></li>
            <li><a class="dropdown-item" href="gellary.php">Gallery</a></li>
            <li><a class="dropdown-item" href="blog.php">Blog</a></li>
            <li><a class="dropdown-item" href="faq.php">FAQ</a></li>
          </ul>
        </li>

        <!-- Language Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle d-flex align-items-center ms-3"
            href="#"
            id="langDropdown"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false">

            <img src="https://flagcdn.com/w40/gb.png"
              class="lang-flag me-2"
              alt="English">

            EN
          </a>

          <ul class="dropdown-menu dropdown-menu-end">

            <li>
              <a class="dropdown-item d-flex align-items-center"
                href="index.php">

                <img src="https://flagcdn.com/w40/gb.png"
                  class="lang-flag me-2"
                  alt="English">

                English
              </a>
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center"
                href="espindex.php">

                <img src="https://flagcdn.com/w40/es.png"
                  class="lang-flag me-2"
                  alt="Spanish">

                Español
              </a>
            </li>

          </ul>
        </li>

        <!-- Contact Button -->
        <li class="nav-item">
          <button type="button"
            class="btn btn-warning text-dark fw-bold ms-3"
            onclick="window.location.href='contact.php'">
            CONTACT
          </button>
        </li>

      </ul>
    </div>
  </div>
</nav>

<!-- ================= MOBILE NAVBAR ================= -->
<nav class="navbar navbar-expand-lg navbar-scroll fixed-top shadow-0 border-bottom border-dark d-lg-none">

  <div class="container">

    <img src="media/logo/SMALL-LOGO-JDID.png"
      onclick="window.location.href='index.php'"
      class="logo"
      height="60"
      width="200"
      alt="2 days Toubkal trek">

    <button class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarSupportedContentMobile"
      aria-controls="navbarSupportedContentMobile"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <i class="bi bi-list"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContentMobile">

      <ul class="navbar-nav ms-auto text-center">

        <li class="nav-item">
          <a class="nav-link" href="index.php">HOME</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="trekking.php">TREKKING</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="ski.php">Ski Touring</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="running.php">Running Trail</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="bike.php">Biking Tours</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="shop.php">Toubkal Shop</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="hotel/hotel.php">Hostel Imlil</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="about.php">About Us</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="gellary.php">Gallery</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="blog.php">Blogs</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="faq.php">FAQ</a>
        </li>

        <!-- Mobile Language Dropdown -->
        <li class="nav-item dropdown mt-2">

          <a class="btn btn-light dropdown-toggle d-flex align-items-center justify-content-center gap-2"
            href="#"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false">

            <img src="https://flagcdn.com/w40/gb.png"
              class="lang-flag"
              alt="English">

            ENGLISH
          </a>

          <ul class="dropdown-menu w-100">

            <li>
              <a class="dropdown-item d-flex align-items-center justify-content-center"
                href="index.php">

                <img src="https://flagcdn.com/w40/gb.png"
                  class="lang-flag me-2"
                  alt="English">

                English
              </a>
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center justify-content-center"
                href="espindex.php">

                <img src="https://flagcdn.com/w40/es.png"
                  class="lang-flag me-2"
                  alt="Spanish">

                Español
              </a>
            </li>

          </ul>
        </li>

        <!-- Contact Button -->
        <li class="nav-item mt-3">
          <button type="button"
            class="btn btn-warning text-dark fw-bold"
            onclick="window.location.href='contact.php'">
            CONTACT
          </button>
        </li>

      </ul>
    </div>
  </div>
</nav>

<script>
  function handleScroll() {
    var navbars = document.querySelectorAll("nav");

    navbars.forEach(function(navbar) {
      if (window.scrollY > 100) {
        navbar.classList.add("transparent");
      } else {
        navbar.classList.remove("transparent");
      }
    });
  }

  window.addEventListener("scroll", handleScroll);
  handleScroll();
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Ski Touring in Morocco | TREKTOUBKAL</title>

  <meta name="description" content="Discover private ski touring trips in Morocco’s High Atlas Mountains with TREKTOUBKAL local guides. Winter routes, snow, Berber culture, and adventure.">

  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet">

  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <style>
    :root {
      --ice: #7dd3fc;
      --ice-strong: #38bdf8;
      --dark: #020617;
      --dark-2: #07111f;
      --panel: rgba(15, 23, 42, 0.78);
      --panel-strong: rgba(15, 23, 42, 0.95);
      --white: #ffffff;
      --muted: #cbd5e1;
      --soft: #94a3b8;
      --border: rgba(255,255,255,0.14);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 20% 5%, rgba(56,189,248,0.18), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(125,211,252,0.10), transparent 25%),
        linear-gradient(180deg, #020617 0%, #07111f 45%, #020617 100%);
      color: var(--white);
      font-family: 'Plus Jakarta Sans', sans-serif;
      overflow-x: hidden;
    }

    h1, h2, h3, h4 {
      font-family: 'Outfit', sans-serif;
    }

    a {
      transition: all 0.3s ease;
    }

    .text-accent {
      color: var(--ice-strong) !important;
    }

    .text-muted-custom {
      color: var(--muted) !important;
    }

    /* HERO */
    .cinematic-hero {
      min-height: 92vh;
      background:
        linear-gradient(90deg, rgba(2,6,23,0.88), rgba(2,6,23,0.35), rgba(2,6,23,0.95)),
        linear-gradient(to bottom, rgba(2,6,23,0.12), #020617),
        url('https://images.unsplash.com/photo-1454496522488-7a8e488e8606?q=80&w=2200') center/cover no-repeat;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .cinematic-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 30%, rgba(56,189,248,0.14), transparent 35%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08), transparent 30%);
      pointer-events: none;
    }

    .cinematic-hero .container {
      position: relative;
      z-index: 2;
      text-align: left;
    }

    .hero-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border: 1px solid rgba(125,211,252,0.28);
      background: rgba(56,189,248,0.10);
      color: var(--ice);
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 0.76rem;
      margin-bottom: 24px;
      backdrop-filter: blur(16px);
    }

    .cinematic-hero h1 {
      max-width: 900px;
      font-size: clamp(3.8rem, 9vw, 8.5rem);
      line-height: 0.88;
      letter-spacing: -4px;
      font-weight: 900;
      margin-bottom: 28px;
      text-transform: uppercase;
    }

    .cinematic-hero h1 span {
      color: transparent;
      -webkit-text-stroke: 2px rgba(255,255,255,0.85);
      text-shadow: 0 0 40px rgba(56,189,248,0.35);
    }

    .hero-text {
      max-width: 650px;
      color: var(--muted);
      font-size: 1.12rem;
      line-height: 1.9;
      margin-bottom: 34px;
    }

    /* BUTTONS */
    .btn-glow {
      background: var(--ice-strong);
      color: #020617;
      padding: 16px 30px;
      border-radius: 999px;
      font-weight: 900;
      text-decoration: none;
      border: 1px solid var(--ice-strong);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 20px 50px rgba(56,189,248,0.30);
    }

    .btn-glow:hover {
      background: #ffffff;
      color: #020617;
      transform: translateY(-3px);
      box-shadow: 0 24px 60px rgba(255,255,255,0.20);
    }

    .btn-outline-ice {
      color: #ffffff;
      padding: 16px 26px;
      border-radius: 999px;
      font-weight: 800;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.06);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      backdrop-filter: blur(16px);
    }

    .btn-outline-ice:hover {
      color: var(--ice);
      border-color: rgba(125,211,252,0.6);
      background: rgba(56,189,248,0.12);
      transform: translateY(-3px);
    }

    /* INFO STRIP */
    .info-strip {
      margin-top: -70px;
      position: relative;
      z-index: 5;
      background: rgba(15,23,42,0.72);
      backdrop-filter: blur(24px);
      border: 1px solid var(--border);
      border-radius: 32px;
      padding: 34px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.42);
    }

    .info-strip h3 {
      font-size: 2rem;
      font-weight: 900;
      margin-bottom: 5px;
    }

    .info-strip p {
      color: var(--soft);
      margin: 0;
      font-size: 0.92rem;
    }

    .info-item {
      padding: 12px;
    }

    /* SECTION TITLE */
    .section-title {
      margin-bottom: 55px;
    }

    .section-title small {
      color: var(--ice);
      text-transform: uppercase;
      letter-spacing: 3px;
      font-weight: 900;
    }

    .section-title h2 {
      font-size: clamp(2.4rem, 5vw, 4.5rem);
      font-weight: 900;
      letter-spacing: -2px;
      margin-top: 12px;
      margin-bottom: 18px;
    }

    .section-title p {
      color: var(--muted);
      max-width: 760px;
      line-height: 1.8;
    }

    /* SKI CARDS */
    .ski-card {
      position: relative;
      height: 560px;
      border-radius: 36px;
      overflow: hidden;
      background: #0f172a;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 24px 70px rgba(0,0,0,0.38);
      transition: 0.45s ease;
    }

    .ski-card:hover {
      transform: translateY(-10px);
      border-color: rgba(125,211,252,0.65);
      box-shadow: 0 34px 90px rgba(56,189,248,0.18);
    }

    .ski-card-img {
      position: absolute;
      inset: 0;
    }

    .ski-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 1.2s ease;
    }

    .ski-card:hover .ski-card-img img {
      transform: scale(1.08);
    }

    .ski-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, rgba(2,6,23,0.98) 0%, rgba(2,6,23,0.86) 36%, rgba(2,6,23,0.18) 72%),
        linear-gradient(to right, rgba(2,6,23,0.55), transparent);
      z-index: 1;
    }

    .ski-card-content {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 34px;
    }

    .ski-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(125,211,252,0.14);
      color: var(--ice);
      border: 1px solid rgba(125,211,252,0.28);
      padding: 9px 14px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 900;
      margin-bottom: 18px;
      backdrop-filter: blur(16px);
    }

    .ski-card h3 {
      font-size: 2rem;
      line-height: 1.12;
      font-weight: 900;
      margin-bottom: 14px;
    }

    .ski-card p {
      color: var(--muted);
      line-height: 1.75;
      margin-bottom: 24px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .ski-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 26px;
    }

    .ski-meta span {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      color: #e2e8f0;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 0.82rem;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      backdrop-filter: blur(16px);
    }

    /* CULTURE SECTION */
    .culture-box {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(15,23,42,0.96), rgba(2,6,23,0.98)),
        url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1800') center/cover no-repeat;
      background-blend-mode: overlay;
      border-radius: 44px;
      padding: 90px 30px;
      margin: 100px 0;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    }

    .culture-box::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(56,189,248,0.18), transparent 38%);
      pointer-events: none;
    }

    .culture-box .row {
      position: relative;
      z-index: 2;
    }

    .culture-box p {
      color: var(--muted);
      line-height: 1.9;
    }

    /* CTA SECTION */
    .cta-box {
      background: rgba(15,23,42,0.82);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 36px;
      padding: 60px 25px;
      box-shadow: 0 25px 70px rgba(0,0,0,0.32);
    }

    /* EMPTY STATE */
    .empty-state {
      background: rgba(15,23,42,0.85);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 36px;
      padding: 70px 25px;
      box-shadow: 0 25px 70px rgba(0,0,0,0.32);
    }

    /* MOBILE */
    @media (max-width: 768px) {
      .cinematic-hero {
        min-height: 82vh;
        text-align: center;
      }

      .cinematic-hero .container {
        text-align: center;
      }

      .cinematic-hero h1 {
        letter-spacing: -2px;
      }

      .hero-text {
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
      }

      .hero-label {
        font-size: 0.68rem;
        letter-spacing: 1.4px;
      }

      .info-strip {
        margin-top: -45px;
        padding: 24px 14px;
        border-radius: 24px;
      }

      .info-strip h3 {
        font-size: 1.45rem;
      }

      .section-title {
        margin-bottom: 35px;
      }

      .ski-card {
        height: 520px;
        border-radius: 28px;
      }

      .ski-card-content {
        padding: 26px;
      }

      .ski-card h3 {
        font-size: 1.55rem;
      }

      .culture-box {
        padding: 60px 22px;
        margin: 70px 0;
        border-radius: 30px;
      }

      .cta-box {
        border-radius: 28px;
        padding: 45px 20px;
      }
    }

    @media (max-width: 420px) {
      .cinematic-hero h1 {
        font-size: 3.2rem;
      }

      .btn-glow,
      .btn-outline-ice {
        width: 100%;
      }

      .ski-card {
        height: 540px;
      }
    }
  </style>
</head>

<body>

  <!-- HERO -->
  <header class="cinematic-hero">
    <div class="container">
      <div class="hero-label">
        <iconify-icon icon="ph:snowflake-bold"></iconify-icon>
        TREKTOUBKAL Winter Expeditions
      </div>

      <h1>
        Ski touring <span>in Morocco</span>
      </h1>

      <p class="hero-text">
        Explore the snowy High Atlas Mountains with local guides, private routes,
        wild landscapes, and authentic Berber hospitality.
      </p>

      <div class="d-flex gap-3 flex-wrap justify-content-start hero-buttons">
        <a href="#explore" class="btn-glow">
          View Expeditions
          <iconify-icon icon="ph:arrow-down-bold"></iconify-icon>
        </a>

        <a href="https://wa.me/212620117112" class="btn-outline-ice">
          <iconify-icon icon="ph:whatsapp-logo-bold"></iconify-icon>
          Ask About a Trip
        </a>
      </div>
    </div>
  </header>

  <main>

    <!-- INFO STRIP -->
    <div class="container">
      <div class="info-strip text-center">
        <div class="row g-3">
          <div class="col-md-3 col-6">
            <div class="info-item">
              <h3>4,167m</h3>
              <p>Max elevation</p>
            </div>
          </div>

          <div class="col-md-3 col-6">
            <div class="info-item">
              <h3>Nov-Apr</h3>
              <p>Ideal season</p>
            </div>
          </div>

          <div class="col-md-3 col-6">
            <div class="info-item">
              <h3>Local</h3>
              <p>Berber guides</p>
            </div>
          </div>

          <div class="col-md-3 col-6">
            <div class="info-item">
              <h3>Private</h3>
              <p>Tailor-made trips</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- SKI PROGRAMS -->
    <section id="explore" class="py-5 mt-5">
      <div class="container">

        <div class="section-title text-center">
          <small>Winter adventures</small>

          <h2>Ski routes in the High Atlas</h2>

          <p class="mx-auto">
            Private programs to discover Toubkal and its snowy valleys with a local,
            safe, and authentic experience.
          </p>
        </div>

        <div class="row g-4">
                                    
              <div class="col-lg-6">
                <article class="ski-card">
                  <div class="ski-card-img">
                    <img
                      src="media/WhatsApp Image 2026-01-31 at 18.35.06.jpeg"
                      alt="Ski touring in the High Atlas Mountains near Imlil and Mount Toubkal, Morocco"
                      loading="lazy"
                    >
                  </div>

                  <div class="ski-card-content">
                    <div class="ski-badge">
                      <iconify-icon icon="ph:mountains-bold"></iconify-icon>
                      Private expedition
                    </div>

                    <h3>
                      Ski Touring – 5 Days Around Imlil &amp; Mount Toubkal (4,167 m)                    </h3>

                    <p>
                      5-day ski touring adventure in the High Atlas from Imlil, exploring Imnane Valley and Mount Toubkal with certified local guides.                    </p>

                    <div class="ski-meta">
                      <span>
                        <iconify-icon icon="ph:snowflake-bold"></iconify-icon>
                        Snow
                      </span>

                      <span>
                        <iconify-icon icon="ph:map-trifold-bold"></iconify-icon>
                        Guided
                      </span>

                      <span>
                        <iconify-icon icon="ph:users-three-bold"></iconify-icon>
                        Private
                      </span>
                    </div>

                    <a href="tour_details.php?id=50" class="btn-glow w-100">
                      Explore This Route
                      <iconify-icon icon="ph:arrow-right-bold"></iconify-icon>
                    </a>
                  </div>
                </article>
              </div>

                          
              <div class="col-lg-6">
                <article class="ski-card">
                  <div class="ski-card-img">
                    <img
                      src="media/IMG_6296.HEIC"
                      alt="Ski touring in Tizi Mizik Pass in the High Atlas Mountains near Imlil, Morocco"
                      loading="lazy"
                    >
                  </div>

                  <div class="ski-card-content">
                    <div class="ski-badge">
                      <iconify-icon icon="ph:mountains-bold"></iconify-icon>
                      Private expedition
                    </div>

                    <h3>
                      Ski Touring in Tizi Mizik Pass – High Atlas Mountains                    </h3>

                    <p>
                      Discover ski touring in the heart of Morocco’s High Atlas Mountains with a full-day adventure to Tizi Mizik Pass (2,489 m). This ski tour is ideal for testing your skiing level, improving technique, and enjoying safe backcountry skiing under the supervision of experienced local mountain guides.  Starting from the village of Imlil, the route ascends gradually through Berber villages, walnut forests, and panoramic alpine landscapes before reaching the pass. Tizi Mizik is the perfect introduction to ski touring in the Atlas, offering rewarding ascents and enjoyable descents depending on snow conditions.                    </p>

                    <div class="ski-meta">
                      <span>
                        <iconify-icon icon="ph:snowflake-bold"></iconify-icon>
                        Snow
                      </span>

                      <span>
                        <iconify-icon icon="ph:map-trifold-bold"></iconify-icon>
                        Guided
                      </span>

                      <span>
                        <iconify-icon icon="ph:users-three-bold"></iconify-icon>
                        Private
                      </span>
                    </div>

                    <a href="tour_details.php?id=49" class="btn-glow w-100">
                      Explore This Route
                      <iconify-icon icon="ph:arrow-right-bold"></iconify-icon>
                    </a>
                  </div>
                </article>
              </div>

                          
              <div class="col-lg-6">
                <article class="ski-card">
                  <div class="ski-card-img">
                    <img
                      src="media/ChatGPT Image 28 avr. 2026, 22_21_29.png"
                      alt="Ski touring in the High Atlas Mountains near Tizi Mizik Pass and Mount Toubkal"
                      loading="lazy"
                    >
                  </div>

                  <div class="ski-card-content">
                    <div class="ski-badge">
                      <iconify-icon icon="ph:mountains-bold"></iconify-icon>
                      Private expedition
                    </div>

                    <h3>
                      Ski Touring in the High Atlas: Tizi Mizik Pass &amp; Toubkal Summit                    </h3>

                    <p>
                      Experience an unforgettable ski touring adventure in the High Atlas Mountains of Morocco. This program begins with a ski tour to Tizi Mizik Pass (2,489m) to evaluate your skiing and physical level, followed by the ultimate challenge: skiing from the summit of Mount Toubkal (4,167m), the highest peak in North Africa.                    </p>

                    <div class="ski-meta">
                      <span>
                        <iconify-icon icon="ph:snowflake-bold"></iconify-icon>
                        Snow
                      </span>

                      <span>
                        <iconify-icon icon="ph:map-trifold-bold"></iconify-icon>
                        Guided
                      </span>

                      <span>
                        <iconify-icon icon="ph:users-three-bold"></iconify-icon>
                        Private
                      </span>
                    </div>

                    <a href="tour_details.php?id=48" class="btn-glow w-100">
                      Explore This Route
                      <iconify-icon icon="ph:arrow-right-bold"></iconify-icon>
                    </a>
                  </div>
                </article>
              </div>

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

    <!-- CULTURE SECTION -->
    <div class="container">
      <section class="culture-box text-center">
        <div class="row align-items-center justify-content-center">
          <div class="col-lg-8">
            <iconify-icon icon="ph:house-line-duotone" class="display-3 text-accent mb-4"></iconify-icon>

            <h2 class="display-4 fw-bold mb-4 text-white">
              Berber <span class="text-accent">hospitality</span>
            </h2>

            <p class="lead">
              Skiing in Morocco is not only about snowy couloirs.
              It is about returning to a warm fireplace in a Berber village,
              sharing mint tea, and enjoying a home-cooked tagine.
              This is the heart of <strong>TREKTOUBKAL</strong>.
            </p>
          </div>
        </div>
      </section>
    </div>

    <!-- CTA -->
    <section class="py-5 text-center">
      <div class="container">
        <div class="cta-box">
          <div class="section-title mb-4">
            <small>Book your adventure</small>

            <h2>
              Ready for the <span class="text-accent">High Atlas?</span>
            </h2>

            <p class="mx-auto">
              Write to us and we will prepare a private proposal according to your level,
              travel dates, and mountain experience.
            </p>
          </div>

          <div class="d-flex justify-content-center gap-3 flex-wrap">
            <a href="https://wa.me/212620117112" class="btn-outline-ice">
              <iconify-icon icon="ph:whatsapp-logo-bold" class="fs-4 text-success"></iconify-icon>
              +212 620 117 112
            </a>

            <a href="mailto:trektoubkalazdour@gmail.com" class="btn-outline-ice">
              <iconify-icon icon="ph:envelope-simple-bold" class="fs-4 text-info"></iconify-icon>
              Email Us
            </a>
          </div>
        </div>
      </div>
    </section>

  </main>

  

<style>
  /*footer*/
footer {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #202c39; /* Dark blue background */
  color: #FFFFFF; /* White text */
  padding: 20px; /* Padding for the footer */
  text-align: center; 
}
#scrollToTopButton {
  position: fixed;
  bottom: 20px;
LEFT: 20px;
  z-index: 100;
  display: none;
}


</style>

<!-- Scroll to Top Button -->
<a href="#" id="scrollToTopButton" class="btn btn-warning btn-lg" role="button" title="Scroll to Top" style="display: none;">
  <i class="bi bi-arrow-up"></i>
</a>
<footer
    class="text-center text-lg-start text-white">
    <!-- Grid container -->
    <div class="container p-4 pb-0">
      <!-- Section: Links -->
      <section class="">
        <!--Grid row-->
        <div class="row">
          <!-- Grid column -->
          <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
            <image src="media/logo/LOGO-JDID-WHITE.png" height="60PX" width="300PX" alt="TREK TOUBKAL" onclick="window.location.href='index.php'" class="logo">
            
            </image>
            <p class="">
            Discover the beauty of Morocco with guided treks to Mount Toubkal, the Atlas Mountains, and the Sahara Desert. Enjoy unforgettable adventures on the best trekking routes in Morocco, with expert guides focused on your safety and sustainability. Book your adventure today with the best travel services in Morocco. </p>
          </div>
          <!-- Grid column -->

        

          <!-- Grid column -->
          <hr class="w-100 clearfix d-md-none" />

          <!-- Grid column -->
          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
            <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
            <p><a href="https://maps.app.goo.gl/cfDg5BbunZKW63bj8" class="link-light link-opacity-75 link-opacity-100-hover text-decoration-none"><i class="fas fa-home mr-3"></i>visit us on our property</a></p>
           <a  class="link-light link-opacity-75 link-opacity-100-hover text-decoration-none" href="mailto:trektoubkalazdour@gmail.com"> <p><i class="fas fa-envelope mr-3"></i>trektoubkalazdour@gmail.com</p></a>
           <a href="tel:+212669771732" class="link-light link-opacity-75 link-opacity-100-hover text-decoration-none"><p><i class="fas fa-phone mr-3"></i> + 212 669771732</p></a> 
           <a href="tel:+212669771732" class="link-light link-opacity-75 link-opacity-100-hover text-decoration-none"> <p><i class="fas fa-print mr-3"></i> + 212 620117112</p></a> 
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
            <h6 class="text-uppercase mb-4 font-weight-bold">Follow us</h6>

            <!-- Facebook -->
            <a
              class="btn btn-primary btn-floating m-1"
              style="background-color: #3b5998"
              href="https://www.facebook.com/share/14mgh56i2a/?mibextid=wwXIfr"
              role="button"><i class="bi bi-facebook"></i></a>

  

          

            <!-- Instagram -->
            <a
              class="btn btn-primary btn-floating m-1"
              style="background-color:rgb(172, 43, 65)"
              href="https://www.instagram.com/trek_toubkal?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw=="
              role="button"><i class="bi bi-instagram"></i>
            </a>

            
            <!-- what -->
            <a
              class="btn btn-primary btn-floating m-1"
                      style="background-color: #25D366"  
                        href="https://wa.me/212620117112"
              role="button"><i class="bi bi-whatsapp"></i>
            </a>
<div id="TA_cdswritereviewlgvi162" class="TA_cdswritereviewlgvi">
<ul id="bVllZR" class="TA_links qT0K3DTsXfyt">
<li id="eqaERilx9m7X" class="FEJQoa">
<a target="_blank" href="https://www.tripadvisor.com/"><img src="https://static.tacdn.com/img2/brand_refresh/Tripadvisor_lockup_horizontal_secondary_registered.svg" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script async src="https://www.jscache.com/wejs?wtype=cdswritereviewlgvi&amp;uniq=162&amp;locationId=25129234&amp;lang=en_US&amp;lang=en_US&amp;display_version=2" data-loadtrk onload="this.loadtrk=true"></script>

<script async src="https://www.jscache.com/wejs?wtype=cdswritereviewlgvi&amp;uniq=977&amp;locationId=25129234&amp;lang=en_US&amp;lang=en_US&amp;display_version=2" data-loadtrk onload="this.loadtrk=true"></script>

          </div>
          
        </div>
        <!--Grid row-->
      </section>
      <!-- Section: Links -->
    </div>
    <!-- Grid container -->

    <!-- Copyright -->
    <div
      class="text-center p-3"
      style="background-color: rgba(0, 0, 0, 0.2)">
      © 2023 Copyright:
      <a class="text-white" href="https://www.instagram.com/younes_azdour/?utm_source=ig_web_button_share_sheet">AZDOUR YOUNES</a>
    </div>
    <!-- Copyright -->
  </footer>

  <script>
   // Show or hide the button when scrolling
  window.onscroll = function() {
   var navbar = document.querySelector(".navbar-scroll");
    var scrollToTopButton = document.getElementById("scrollToTopButton");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      scrollToTopButton.style.display = "block";
      navbar.classList.add("transparent");
    } else {
      scrollToTopButton.style.display = "none";
      navbar.classList.remove("transparent");

    }
  };

  // Scroll to top when the button is clicked
  document.getElementById("scrollToTopButton").onclick = function(event) {
    event.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>
</body>
</html>'''

path = Path("/mnt/data/ski.php")
path.write_text(content, encoding="utf-8")
print(f"Created: {path}")