.elementor-kit-11{--e-global-color-primary:#A12121;--e-global-color-secondary:#FDAB67;--e-global-color-text:#333333;--e-global-color-accent:#5A2F1C;--e-global-color-fbdf8de:#FFFFFF;--e-global-color-cf8aa1a:#4D8B55;--e-global-color-f75c907:#FAF8F5;--e-global-color-b670f44:#392922;--e-global-typography-primary-font-family:"Forum";--e-global-typography-secondary-font-family:"Instrument Sans";--e-global-typography-text-font-family:"Instrument Sans";--e-global-typography-accent-font-family:"Instrument Sans";}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{background-color:var( --e-global-color-primary );color:var( --e-global-color-fbdf8de );box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-kit-11 button:hover,.elementor-kit-11 button:focus,.elementor-kit-11 input[type="button"]:hover,.elementor-kit-11 input[type="button"]:focus,.elementor-kit-11 input[type="submit"]:hover,.elementor-kit-11 input[type="submit"]:focus,.elementor-kit-11 .elementor-button:hover,.elementor-kit-11 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-fbdf8de );}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;--container-default-padding-top:100px;--container-default-padding-right:100px;--container-default-padding-bottom:100px;--container-default-padding-left:100px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{padding:14px 22px 14px 22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}}/* Start custom CSS */<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Forum&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    /* Minimal additional styles for elements not covered by global CSS */
    .about-hero {
      background: #F5EBDD;
      padding: 100px 0;
      text-align: center;
    }
    .about-story {
      background: #FFFFFF;
      padding: 100px 0;
    }
    .about-whatwedo {
      background: #F5EBDD;
      padding: 100px 0;
    }
    .about-approach {
      background: #FAF6F1;
      padding: 100px 0;
    }
    .about-leadership {
      background: #F5EBDD;
      padding: 100px 0;
    }
    .about-cta {
      background: #3B1F0F;
      padding: 100px 0;
      text-align: center;
    }
    .two-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 60px;
      align-items: center;
    }
    .text-column {
      flex: 1;
    }
    .image-column {
      flex: 1;
    }
    .image-column img {
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .leadership-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      justify-content: center;
    }
    .leadership-card {
      flex: 1;
      min-width: 260px;
      background: #FFFFFF;
      border-radius: 6px;
      padding: 32px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .leadership-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    }
    .leadership-card h3 {
      font-family: 'Forum', cursive;
      font-size: 28px;
      font-weight: 400;
      color: #3B1F0F;
      margin-bottom: 8px;
    }
    .leadership-card .title {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #A63A2B;
      margin-bottom: 16px;
    }
    .leadership-card .bio {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: #5C4033;
    }
    @media (max-width: 768px) {
      .about-hero, .about-story, .about-whatwedo, .about-approach, .about-leadership, .about-cta {
        padding: 70px 0;
      }
      .two-columns {
        flex-direction: column;
        gap: 40px;
      }
      .leadership-card {
        padding: 24px;
      }
      .leadership-card h3 {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>
  <!-- 1️⃣ Hero (About Intro) -->
  <section class="about-hero">
    <div class="container" style="max-width:1240px; margin:0 auto; padding:0 24px;">
      <h1 style="font-family:'Forum',cursive; font-size:64px; font-weight:400; color:#3B1F0F; margin-bottom:20px;">Building the Future of Food Systems</h1>
      <p style="font-family:'Instrument Sans',sans-serif; font-size:20px; line-height:1.4; max-width:700px; margin:0 auto; color:#5C4033;">Koroga is a food processing and distribution company focused on preserving value, reducing waste, and expanding access to quality food across Africa and beyond.</p>
    </div>
  </section>

  <!-- 2️⃣ Our Story -->
  <section class="about-story">
    <div class="container" style="max-width:1240px; margin:0 auto; padding:0 24px;">
      <div class="two-columns">
        <div class="text-column">
          <h2 style="font-family:'Forum',cursive; font-size:48px; font-weight:400; color:#3B1F0F; margin-bottom:20px;">Our Story</h2>
          <p style="font-family:'Instrument Sans',sans-serif; font-size:18px; line-height:1.6; color:#5C4033;">Koroga was founded with a simple but urgent idea — that food should not be lost between harvest and consumption.</p>
          <p style="font-family:'Instrument Sans',sans-serif; font-size:18px; line-height:1.6; color:#5C4033; margin-top:20px;">In many parts of Africa, high-quality agricultural produce is abundant, yet access, preservation, and distribution remain significant challenges. Koroga was built to bridge that gap.</p>
          <p style="font-family:'Instrument Sans',sans-serif; font-size:18px; line-height:1.6; color:#5C4033; margin-top:20px;">What began as a focused effort in food and beverage solutions has evolved into a broader mission: building integrated systems that preserve value, extend shelf life, and connect producers to growing markets.</p>
        </div>
        <div class="image-column">
          <img src="https://korogagroup.com/wp-content/uploads/2026/03/1000119797.jpg" alt="Fresh fruit harvest" loading="lazy">
        </div>
      </div>
    </div>
  </section>

  <!-- 3️⃣ What We Do -->
  <section class="about-whatwedo">
    <div class="container" style="max-width:1240px; margin:0 auto; padding:0 24px;">
      <h2 style="font-family:'Forum',cursive; font-size:48px; font-weight:400; color:#3B1F0F; text-align:center; margin-bottom:60px;">What We Do</h2>
      <div class="divisions-grid" style="display:flex; flex-wrap:wrap; gap:40px; justify-content:center;">
        <div class="division-card" style="flex:1; min-width:260px; background:#FFFFFF; border-radius:6px; padding:30px; box-shadow:0 4px 12px rgba(0,0,0,0.05); display:flex; flex-direction:column; align-items:center; text-align:center;">
          <h3 style="font-family:'Forum',cursive; font-size:28px; font-weight:400; color:#3B1F0F; margin-bottom:20px;">Food Processing & Preservation</h3>
          <p style="font-family:'Instrument Sans',sans-serif; font-size:16px; line-height:1.6; color:#5C4033; margin-bottom:28px;">We produce shelf-stable food solutions that maintain quality, nutrition, and usability across extended periods.</p>
        </div>
        <div class="division-card" style="flex:1; min-width:260px; background:#FFFFFF; border-radius:6px; padding:30px; box-shadow:0 4px 12px rgba(0,0,0,0.05); display:flex; flex-direction:column; align-items:center; text-align:center;">
          <h3 style="font-family:'Forum',cursive; font-size:28px; font-weight:400; color:#3B1F0F; margin-bottom:20px;">Automated Retail</h3>
          <p style="font-family:'Instrument Sans',sans-serif; font-size:16px; line-height:1.6; color:#5C4033; margin-bottom:28px;">We deploy smart retail systems that improve access to food and beverages in high-demand environments.</p>
        </div>
        <div class="division-card" style="flex:1; min-width:260px; background:#FFFFFF; border-radius:6px; padding:30px; box-shadow:0 4px 12px rgba(0,0,0,0.05); display:flex; flex-direction:column; align-items:center; text-align:center;">
          <h3 style="font-family:'Forum',cursive; font-size:28px; font-weight:400; color:#3B1F0F; margin-bottom:20px;">Supply & Distribution</h3>
          <p style="font-family:'Instrument Sans',sans-serif; font-size:16px; line-height:1.6; color:#5C4033; margin-bottom:28px;">We build networks that connect producers to local and global markets efficiently and reliably.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 4️⃣ Our Approach (Philosophy) -->
  <section class="about-approach">
    <div class="container" style="max-width:1240px; margin:0 auto; padding:0 24px; text-align:center;">
      <h2 style="font-family:'Forum',cursive; font-size:48px; font-weight:400; color:#3B1F0F; margin-bottom:20px;">Our Approach</h2>
      <p style="font-family:'Instrument Sans',sans-serif; font-size:18px; line-height:1.6; max-width:800px; margin:0 auto; color:#5C4033;">We focus on building systems, not just products.</p>
      <p style="font-family:'Instrument Sans',sans-serif; font-size:18px; line-height:1.6; max-width:800px; margin:20px auto 0; color:#5C4033;">By combining processing, distribution, and access, we create solutions that are scalable, adaptable, and rooted in real market needs.</p>
      <p style="font-family:'Instrument Sans',sans-serif; font-size:18px; line-height:1.6; max-width:800px; margin:20px auto 0; color:#5C4033;">Our work is guided by quality, efficiency, and long-term impact.</p>
    </div>
  </section>

  <!-- 5️⃣ Leadership (Two Cards) -->
  <section class="about-leadership">
    <div class="container" style="max-width:1240px; margin:0 auto; padding:0 24px;">
      <h2 style="font-family:'Forum',cursive; font-size:48px; font-weight:400; color:#3B1F0F; text-align:center; margin-bottom:60px;">Leadership</h2>
      <div class="leadership-grid">
        <!-- Card 1 -->
        <div class="leadership-card">
          <h3>Grace Katima</h3>
          <p class="title">Founder & Director, Global Strategy & Market Expansion</p>
          <p class="bio">Grace brings experience in African supply chains, market expansion, and cross-border partnerships across East and Central Africa. Her work focuses on building systems that connect production to opportunity.</p>
        </div>
        <!-- Card 2 (Placeholder – replace with actual leader) -->
        <div class="leadership-card">
          <h3>[Second Leader Name]</h3>
          <p class="title">[Title / Role]</p>
          <p class="bio">[Brief bio highlighting their expertise and contribution to Koroga’s mission. Keep it concise and aligned with the brand story.]</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 6️⃣ Closing CTA -->
  <section class="about-cta">
    <div class="container" style="max-width:800px; margin:0 auto; padding:0 24px;">
      <h2 style="font-family:'Forum',cursive; font-size:48px; font-weight:400; color:#FFFFFF; margin-bottom:20px;">Building with Purpose. Scaling with Intention.</h2>
      <a href="#" class="btn-primary" style="display:inline-block; background:#A63A2B; color:#FFFFFF; font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:16px; padding:14px 32px; border-radius:40px; text-decoration:none; transition:all 0.2s;">Work With Us →</a>
    </div>
  </section>
</body>
</html>/* End custom CSS */