:root{
      --brand-1:#0f172a;      /* deep navy */
      --accent:#b88a52;       /* warm gold */
      --muted:#6b7280;
      --max:1200px;
      --radius:16px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--brand-1);background:#fff;line-height:1.45}
    a{text-decoration:none;color:inherit}

    /* layout */
    .wrap{max-width:var(--max);margin:0 auto;padding:20px}
    header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border-bottom:1px solid #eef0f3;z-index:5}
    .head{max-width:var(--max);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:10px}
    .brand__name{font-family:"Playfair Display",serif;font-size:20px;font-weight:700}
    nav{display:flex;gap:18px}
    nav a{padding:8px 6px}
    nav a:hover{text-decoration:underline}

    /* hero */
    .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:28px 0}
    .t1{font-family:"Playfair Display",serif;font-size:40px;line-height:1.02;margin:0}
    .sub{color:var(--muted);margin-top:12px;max-width:40rem}
    .cta{margin-top:18px;display:flex;gap:12px}
    .btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:600;border:1px solid #e8eaee}
    .btn--primary{background:var(--brand-1);color:#fff;border-color:var(--brand-1)}
    .btn--ghost{background:#fff;color:var(--brand-1)}
    .hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.hero-text {
  position: absolute;
  bottom: 40px;     /* distance from bottom */
  left: 40px;       /* distance from left */
  color: white;
  z-index: 10;
}

.hero-text h1 {
  font-size: 36px;
  margin: 0;
}

.hero-text p {
  font-size: 18px;
  margin: 5px 0 0;
}

/* Navbar Floating + Sticky */
.navbar {
  position: fixed;       /* stays on scroll */
  top: 0;                /* no gap */
  left: 0;
  width: 100%;           /* full width same as hero */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: rgba(0, 0, 0, 0.5); /* transparent */
  backdrop-filter: blur(6px);     /* optional: glass effect */
  z-index: 1000;
}

.logo {
  font-size: 22px;
  font-weight: bold;
  color: white;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: #c5a46d; /* gold hover */
}


/* About Section */
/* ===== ABOUT MAISON OKAPI SECTION ===== */
.about {
  padding: 80px 20px;
  background-color: #fafafa;
  text-align: center; /* Center alignment */
}

.about-inner {
  max-width: 800px;
  margin: 0 auto;
}

.about h2 {
  font-family: 'Playfair Display', serif; /* Serif font for title */
  font-size: 2.4rem;
  margin-bottom: 15px;
}

.about .divider {
  width: 60px;
  height: 3px;
  background: #000;
  margin: 0 auto 25px auto; /* centered divider */
}

.about .lead {
  font-family: 'Playfair Display', serif; /* Serif font for paragraph */
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
}



    /* features */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
    .feature{border:1px solid #eef0f3;border-radius:12px;padding:16px;background:#fff}
    .feature h4{margin:0 0 6px 0}

    /* products */
    #shop{padding:28px 0}
    #products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{border:1px solid #eef0f3;border-radius:16px;overflow:hidden;background:#fff;transition:transform .2s, box-shadow .2s}
    .card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(15,23,42,.08)}
    .card img{width:100%;height:320px;object-fit:cover;display:block}
    .card-body{padding:12px 14px}
    .price{color:var(--muted);font-weight:600;margin-top:6px}

    /* sections */
    section{scroll-margin-top:80px}
    footer{border-top:1px solid #eef0f3;padding:22px 0;color:var(--muted);text-align:center;margin-top:28px}

    /* responsive */
    @media (max-width:900px){
      .hero{grid-template-columns:1fr}
      #products-grid{grid-template-columns:repeat(2,1fr)}
      .t1{font-size:32px}
      .hero-img{height:360px}
    }
    @media (max-width:600px){
      #products-grid{grid-template-columns:1fr}
      .t1{font-size:28px}
    }
<!-- ========== SHOP SECTION ========== -->
<section id="shop" class="shop">
  <h2>Shop</h2>

  <!-- Arrows -->
  <button class="arrow left" onclick="scrollShop(-1)">&#10094;</button>
  <button class="arrow right" onclick="scrollShop(1)">&#10095;</button>

  <!-- Slider Wrapper -->
  <div class="shop-container">
    <div class="shop-slider" id="shopSlider">
      <!-- Item 1 -->
      <div class="shop-item" onclick="openModal('The Okapi Jacket','Ksh 8,500','images/jacket1.jpg')">
        <img src="images/jacket1.jpg" alt="Okapi Jacket">
        <h3>The Okapi Jacket</h3>
        <p>Ksh 8,500</p>
      </div>
      <!-- Item 2 -->
      <div class="shop-item" onclick="openModal('The Spiderweb Jacket','Ksh 8,500','images/jacket2.jpg')">
        <img src="images/jacket2.jpg" alt="Spiderweb Jacket">
        <h3>The Spiderweb Jacket</h3>
        <p>Ksh 8,500</p>
      </div>
      <!-- Item 3 -->
      <div class="shop-item" onclick="openModal('The Equatorial Edge Jacket','Ksh 8,500','images/jacket3.jpg')">
        <img src="images/jacket3.jpg" alt="Equatorial Edge Jacket">
        <h3>The Equatorial Edge Jacket</h3>
        <p>Ksh 8,500</p>
      </div>
      <!-- Item 4 -->
      <div class="shop-item" onclick="openModal('The Opulence Jacket','Ksh 7,500','images/jacket4.jpg')">
        <img src="images/jacket4.jpg" alt="Opulence Jacket">
        <h3>The Opulence Jacket</h3>
        <p>Ksh 7,500</p>
      </div>
      <!-- Item 5 -->
      <div class="shop-item" onclick="openModal('The Safari Jacket','Ksh 7,500','images/jacket5.jpg')">
        <img src="images/jacket5.jpg" alt="Safari Jacket">
        <h3>The Safari Jacket</h3>
        <p>Ksh 7,500</p>
      </div>
      <!-- Item 6 -->
      <div class="shop-item" onclick="openModal('The Military Trench-Coat','Ksh 10,000','images/jacket6.jpg')">
        <img src="images/jacket6.jpg" alt="Military Trench-Coat">
        <h3>The Military Trench-Coat</h3>
        <p>Ksh 10,000</p>
      </div>
      <!-- Item 7 -->
      <div class="shop-item" onclick="openModal('The Opulence Jacket','Ksh 6,500','images/jacket7.jpg')">
        <img src="images/jacket7.jpg" alt="Opulence Jacket">
        <h3>The Opulence Jacket</h3>
        <p>Ksh 6,500</p>
      </div>
      <!-- Item 8 -->
      <div class="shop-item" onclick="openModal('The Poker Shirt-Jacket','Ksh 3,500','images/jacket8.jpg')">
        <img src="images/jacket8.jpg" alt="Poker Shirt-Jacket">
        <h3>The Poker Shirt-Jacket</h3>
        <p>Ksh 3,500</p>
      </div>
      <!-- Item 9 -->
      <div class="shop-item" onclick="openModal('The Versatile Half-Jacket','Ksh 2,500','images/jacket9.jpg')">
        <img src="images/jacket9.jpg" alt="Versatile Half-Jacket">
        <h3>The Versatile Half-Jacket</h3>
        <p>Ksh 2,500</p>
      </div>
    </div>
  </div>
</section>

<!-- Modal -->
<div id="modal" class="modal">
  <span class="close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="modalImage">
  <div id="modalCaption"></div>
</div>

<!-- ========== SHOP STYLES ========== -->
<style>
/* Shop Section */
.shop {
  padding: 50px 20px;
  text-align: center;
  background: #fff;
}

.shop h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Slider Container */
.shop-slider-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  margin: auto;
}

/* Hide scrollbar */
.shop-slider {
  display: flex;
  gap: 10px; /* minimal spacing */
  overflow: hidden;
  scroll-behavior: smooth;
}

/* Each item */
.shop-item {
  min-width: 250px;
  max-width: 250px;
  flex-shrink: 0;
  background: #f8f8f8;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover pop-out effect */
.shop-item:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 5; /* make sure it sits above neighbors */
}

.shop-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 0; /* square corners */
}

.shop-item h3,
.shop-item p {
  margin: 5px 0;
}

/* Arrows */
.shop-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.shop-arrow.left {
  left: 10px;
}

.shop-arrow.right {
  right: 10px;
}

.shop-arrow:hover {
  background: rgba(0,0,0,0.8);
}


/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 70%;
  border-radius: 10px;
}

#modalCaption {
  margin: 15px auto;
  text-align: center;
  color: #fff;
  font-size: 1.2em;
}

.close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
</style>

<!-- ========== SHOP SCRIPT ========== -->
<script>
let slider = document.getElementById("shopSlider");
let scrollAmount = 0;
let autoSlideInterval;
let isModalOpen = false;

// Scroll function
function scrollShop(direction) {
  let itemWidth = document.querySelector(".shop-item").offsetWidth + 20;
  scrollAmount += direction * itemWidth;

  let maxScroll = (slider.children.length * itemWidth) - slider.parentElement.offsetWidth;
  if (scrollAmount < 0) scrollAmount = 0;
  if (scrollAmount > maxScroll) scrollAmount = 0; // loop to start

  slider.style.transform = `translateX(${-scrollAmount}px)`;
}

// Start auto sliding
function startAutoSlide() {
  autoSlideInterval = setInterval(() => {
    if (!isModalOpen) {
      scrollShop(1); // move right
    }
  }, 3000); // every 3s
}

// Stop auto sliding
function stopAutoSlide() {
  clearInterval(autoSlideInterval);
}

// Modal
function openModal(title, price, image) {
  document.getElementById("modal").style.display = "block";
  document.getElementById("modalImage").src = image;
  document.getElementById("modalCaption").innerHTML = `<h3>${title}</h3><p>${price}</p>`;
  isModalOpen = true;
  stopAutoSlide(); // stop when modal opens
}

// Close modal
function closeModal() {
  document.getElementById("modal").style.display = "none";
  isModalOpen = false;
  startAutoSlide(); // resume autoplay
}

// Start autoplay when page loads
window.onload = startAutoSlide;
</script>
/* Dropdown styling */
.dropdown {
  position: relative;
}

/* Dropdown styling */
.dropdown {
  position: relative; /* make Shop the reference for its dropdown */
}

/* Dropdown container */
.navbar .dropdown {
  position: relative;
  display: inline-block;
}

/* Keep dropdown hidden by default */
/* Dropdown menu */
.dropdown-menu {
  display: none;            /* Hidden by default */
  position: absolute;
  top: 100%;                /* Right under "Shop" */
  left: 0;
  background: white;        /* Clean white background */
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.dropdown-menu li a:hover {
  background: #f4f4f4;
  color: #000;
}

/* ✅ Show only when clicking, not hovering */
.dropdown.active .dropdown-menu {
  display: block;
}


/* Style dropdown links */
.dropdown-menu li a {
  display: block;
  padding: 8px 12px;
  color: black;
  text-decoration: none;
  font-size: 14px;
}

.dropdown-menu li a:hover {
  background: #f5f5f5;
}
/* ===== OUR STORY SECTION (clean + serif font) ===== */
.our-story {
  padding: 80px 20px;
  background-color: #fff;
}

.our-story-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.story-text {
  flex: 1;
  min-width: 300px;
  max-width: 550px;
  font-family: 'Playfair Display', serif; /* Serif font */
}

.story-text h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.story-text .divider {
  width: 60px;
  height: 3px;
  background: #000;
  margin-bottom: 20px;
}

.story-text .lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}

.story-image {
  flex: 1;
  min-width: 280px;
  max-width: 500px;
  text-align: center;
}

.story-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}



<!-- Our Story -->
<section id="our-story" class="our-story">
  <div class="story-container">
    <!-- Left: Image -->
    <div class="story-image">
      <img src="images/okapi.jpg" alt="Maison Okapi Inspiration">
    </div>

    <!-- Right: Text -->
    <div class="story-text">
      <h2>Our Story</h2>
      <p>
        Inspired by the rare Okapi — a symbol of elegance, strength, and quiet resilience —
        Maison Okapi was founded to merge heritage with modern expression.
        Each garment reflects African pride, ambition, and refined craftsmanship
        for the conscious man of today.
      </p>
    </div>
  </div>
</section>
/* ===== CONTACT SECTION ===== */
.contact {
  padding: 80px 20px;
  background: #f9f9f9;
  text-align: center;
}

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

.contact h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.contact .subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 30px;
}

.contact-form {
  margin-bottom: 40px;
}

.contact-form .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.contact-form input,
.contact-form textarea {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
}

.contact-form textarea {
  resize: none;
  width: 100%;
}

.contact-form .submit-btn {
  background: black;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.contact-form .submit-btn:hover {
  background: #333;
}

.direct-contact {
  margin-bottom: 30px;
  font-size: 0.95rem;
  color: #444;
}

.direct-contact p {
  margin: 8px 0;
}

.direct-contact .social-icons a {
  color: black;
  text-decoration: none;
  font-weight: 500;
  margin: 0 5px;
}

.direct-contact .social-icons a:hover {
  text-decoration: underline;
}

.return-policy {
  font-size: 0.9rem;
  color: #555;
  margin-top: 20px;
}

.return-policy h3 {
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
  margin-bottom: 10px;
}

/* ===== Footer Styling ===== */
.footer {
  background: #000;
  color: #fff;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

.icon-row {
  display: flex;
  justify-content: center;
  gap: 25px; /* spacing between icons */
}

.icon-row a {
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.icon-row a:hover {
  color: #c5a880; /* gold/bronze hover for luxury feel */
}

/* Modal */
.modal {
  display: none; 
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}

.modal-content {
  background: #fff;
  color: #000;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  text-align: left;
}

.modal .close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}