/* ============================================================================
   🧱 K2 Section Utility
   ----------------------------------------------------------------------------
   Purpose:
   Defines a semantic and layout foundation for major content sections
   throughout a page. The <section> element represents a standalone block of
   content with its own thematic grouping — highly recommended for SEO and
   accessibility, as it helps search engines and assistive technologies
   understand the content structure.

   🧭 Usage Philosophy:
   ---------------------------------------------------------------------------
   ✅ Developers should wrap major content areas in a <section> tag.
   ✅ Inside each <section>, use a .k2-container to center and constrain width.
   ✅ Apply background color, gradients, or surface styles to the <section>.
   ✅ Apply horizontal padding, text alignment, and content layout within the
      inner .k2-container.

   Example:
   ---------------------------------------------------------------------------
   <section class="k2-section k2-bg-surface">
     <div class="k2-container">
       <h2 class="k2-heading-lg">Our Courses</h2>
       <p>Explore industry-ready programs designed for future innovators.</p>
     </div>
   </section>

   🧩 Why This Matters:
   ---------------------------------------------------------------------------
   - <section> provides semantic meaning: good for SEO & screen readers.
   - Keeps visual rhythm consistent between major blocks.
   - Decouples spacing (section) from layout (container).
   - Developers can set unique background or surface tones per section while
     maintaining global spacing rules.
   - Encourages clean, maintainable page hierarchy:
     <header> → <main> → <section> → <article> → <footer>

   🌐 Best Practices:
   ---------------------------------------------------------------------------
   - Never apply direct padding or alignment on <section> — use .k2-container.
   - For edge-to-edge visuals (like hero banners), use:
       <section class="k2-section k2-bg-primary">
         <div class="k2-container">
           ...
         </div>
       </section>
   - Keep one logical topic or theme per section for SEO clarity.
   ============================================================================
*/

.k2-section {
  padding-top: var(--k2-space-10);
  padding-bottom: var(--k2-space-10);
}

@media (min-width: 768px) {
  .k2-section {
    padding-top: var(--k2-space-14);
    padding-bottom: var(--k2-space-14);
  }
}



/**
 * ============================================================================
 * 📏 K2 Spacing Utilities (Margin & Padding)
 * ----------------------------------------------------------------------------
 * Apply consistent spacing using predefined K2 spacing tokens.
 * Mobile-first, utility-first approach.
 *
 * Naming Convention:
 * ----------------------------------------------------------------------------
 * .k2-m-[size]      → margin (all sides)
 * .k2-mx-[size]     → horizontal margin (left + right)
 * .k2-my-[size]     → vertical margin (top + bottom)
 * .k2-mt-[size]     → margin-top
 * .k2-mr-[size]     → margin-right
 * .k2-mb-[size]     → margin-bottom
 * .k2-ml-[size]     → margin-left
 *
 * .k2-p-[size]      → padding (all sides)
 * .k2-px-[size]     → horizontal padding (left + right)
 * .k2-py-[size]     → vertical padding (top + bottom)
 * .k2-pt-[size]     → padding-top
 * .k2-pr-[size]     → padding-right
 * .k2-pb-[size]     → padding-bottom
 * .k2-pl-[size]     → padding-left
 *
 * Size Scale:
 * ----------------------------------------------------------------------------
 * 0 → 0
 * 1 → var(--k2-space-1) = 0.25rem
 * 2 → var(--k2-space-2) = 0.5rem
 * 3 → var(--k2-space-3) = 0.75rem
 * 4 → var(--k2-space-4) = 1rem
 * 5 → var(--k2-space-5) = 1.25rem
 * 6 → var(--k2-space-6) = 1.5rem
 * 8 → var(--k2-space-8) = 2rem
 *
 * Usage Examples:
 * ----------------------------------------------------------------------------
 * <div class="k2-m-4">Adds 1rem margin on all sides</div>
 * <div class="k2-mt-2 k2-mb-6">Top 0.5rem, Bottom 1.5rem</div>
 * <button class="k2-px-3 k2-py-2">Horizontal 0.75rem, Vertical 0.5rem</button>
 * <section class="k2-my-8 k2-p-6">Vertical margin 2rem, padding 1.5rem</section>
 * ============================================================================
 */

/* ------------------------------
   Margin Utilities
------------------------------ */
.k2-m-0  { margin: var(--k2-space-0) !important; }
.k2-m-1  { margin: var(--k2-space-1) !important; }
.k2-m-2  { margin: var(--k2-space-2) !important; }
.k2-m-3  { margin: var(--k2-space-3) !important; }
.k2-m-4  { margin: var(--k2-space-4) !important; }
.k2-m-5  { margin: var(--k2-space-5) !important; }
.k2-m-6  { margin: var(--k2-space-6) !important; }
.k2-m-8  { margin: var(--k2-space-8) !important; }

.k2-mx-0 { margin-left: var(--k2-space-0) !important; margin-right: var(--k2-space-0) !important; }
.k2-mx-1 { margin-left: var(--k2-space-1) !important; margin-right: var(--k2-space-1) !important; }
.k2-mx-2 { margin-left: var(--k2-space-2) !important; margin-right: var(--k2-space-2) !important; }
.k2-mx-3 { margin-left: var(--k2-space-3) !important; margin-right: var(--k2-space-3) !important; }
.k2-mx-4 { margin-left: var(--k2-space-4) !important; margin-right: var(--k2-space-4) !important; }
.k2-mx-5 { margin-left: var(--k2-space-5) !important; margin-right: var(--k2-space-5) !important; }
.k2-mx-6 { margin-left: var(--k2-space-6) !important; margin-right: var(--k2-space-6) !important; }
.k2-mx-8 { margin-left: var(--k2-space-8) !important; margin-right: var(--k2-space-8) !important; }

.k2-my-0 { margin-top: var(--k2-space-0) !important; margin-bottom: var(--k2-space-0) !important; }
.k2-my-1 { margin-top: var(--k2-space-1) !important; margin-bottom: var(--k2-space-1) !important; }
.k2-my-2 { margin-top: var(--k2-space-2) !important; margin-bottom: var(--k2-space-2) !important; }
.k2-my-3 { margin-top: var(--k2-space-3) !important; margin-bottom: var(--k2-space-3) !important; }
.k2-my-4 { margin-top: var(--k2-space-4) !important; margin-bottom: var(--k2-space-4) !important; }
.k2-my-5 { margin-top: var(--k2-space-5) !important; margin-bottom: var(--k2-space-5) !important; }
.k2-my-6 { margin-top: var(--k2-space-6) !important; margin-bottom: var(--k2-space-6) !important; }
.k2-my-8 { margin-top: var(--k2-space-8) !important; margin-bottom: var(--k2-space-8) !important; }

.k2-mt-0 { margin-top: var(--k2-space-0) !important; }
.k2-mt-1 { margin-top: var(--k2-space-1) !important; }
.k2-mt-2 { margin-top: var(--k2-space-2) !important; }
.k2-mt-3 { margin-top: var(--k2-space-3) !important; }
.k2-mt-4 { margin-top: var(--k2-space-4) !important; }
.k2-mt-5 { margin-top: var(--k2-space-5) !important; }
.k2-mt-6 { margin-top: var(--k2-space-6) !important; }
.k2-mt-7 { margin-top: var(--k2-space-7) !important; }
.k2-mt-8 { margin-top: var(--k2-space-8) !important; }
.k2-mt-9 { margin-top: var(--k2-space-9) !important; }
.k2-mt-10 { margin-top: var(--k2-space-10) !important; }
.k2-mt-11 { margin-top: var(--k2-space-11) !important; }
.k2-mt-12 { margin-top: var(--k2-space-12) !important; }
.k2-mt-13 { margin-top: var(--k2-space-13) !important; }
.k2-mt-14 { margin-top: var(--k2-space-14) !important; }

.k2-mr-0 { margin-right: var(--k2-space-0) !important; }
.k2-mr-1 { margin-right: var(--k2-space-1) !important; }
.k2-mr-2 { margin-right: var(--k2-space-2) !important; }
.k2-mr-3 { margin-right: var(--k2-space-3) !important; }
.k2-mr-4 { margin-right: var(--k2-space-4) !important; }
.k2-mr-5 { margin-right: var(--k2-space-5) !important; }
.k2-mr-6 { margin-right: var(--k2-space-6) !important; }
.k2-mr-8 { margin-right: var(--k2-space-8) !important; }

.k2-mb-0 { margin-bottom: var(--k2-space-0) !important; }
.k2-mb-1 { margin-bottom: var(--k2-space-1) !important; }
.k2-mb-2 { margin-bottom: var(--k2-space-2) !important; }
.k2-mb-3 { margin-bottom: var(--k2-space-3) !important; }
.k2-mb-4 { margin-bottom: var(--k2-space-4) !important; }
.k2-mb-5 { margin-bottom: var(--k2-space-5) !important; }
.k2-mb-6 { margin-bottom: var(--k2-space-6) !important; }
.k2-mb-8 { margin-bottom: var(--k2-space-8) !important; }

/* ------------------------------
   Padding Utilities
------------------------------ */
.k2-p-0  { padding: var(--k2-space-0) !important; }
.k2-p-1  { padding: var(--k2-space-1) !important; }
.k2-p-2  { padding: var(--k2-space-2) !important; }
.k2-p-3  { padding: var(--k2-space-3) !important; }
.k2-p-4  { padding: var(--k2-space-4) !important; }
.k2-p-5  { padding: var(--k2-space-5) !important; }
.k2-p-6  { padding: var(--k2-space-6) !important; }
.k2-p-7  { padding: var(--k2-space-7) !important; }
.k2-p-8  { padding: var(--k2-space-8) !important; }
.k2-p-9  { padding: var(--k2-space-9) !important; }
.k2-p-10  { padding: var(--k2-space-10) !important; }
.k2-p-11  { padding: var(--k2-space-11) !important; }
.k2-p-12  { padding: var(--k2-space-12) !important; }
.k2-p-13  { padding: var(--k2-space-13) !important; }
.k2-p-14  { padding: var(--k2-space-14) !important; }

.k2-px-0 { padding-left: var(--k2-space-0) !important; padding-right: var(--k2-space-0) !important; }
.k2-px-1 { padding-left: var(--k2-space-1) !important; padding-right: var(--k2-space-1) !important; }
.k2-px-2 { padding-left: var(--k2-space-2) !important; padding-right: var(--k2-space-2) !important; }
.k2-px-3 { padding-left: var(--k2-space-3) !important; padding-right: var(--k2-space-3) !important; }
.k2-px-4 { padding-left: var(--k2-space-4) !important; padding-right: var(--k2-space-4) !important; }
.k2-px-5 { padding-left: var(--k2-space-5) !important; padding-right: var(--k2-space-5) !important; }
.k2-px-6 { padding-left: var(--k2-space-6) !important; padding-right: var(--k2-space-6) !important; }
.k2-px-8 { padding-left: var(--k2-space-8) !important; padding-right: var(--k2-space-8) !important; }

.k2-py-0 { padding-top: var(--k2-space-0) !important; padding-bottom: var(--k2-space-0) !important; }
.k2-py-1 { padding-top: var(--k2-space-1) !important; padding-bottom: var(--k2-space-1) !important; }
.k2-py-2 { padding-top: var(--k2-space-2) !important; padding-bottom: var(--k2-space-2) !important; }
.k2-py-3 { padding-top: var(--k2-space-3) !important; padding-bottom: var(--k2-space-3) !important; }
.k2-py-4 { padding-top: var(--k2-space-4) !important; padding-bottom: var(--k2-space-4) !important; }
.k2-py-5 { padding-top: var(--k2-space-5) !important; padding-bottom: var(--k2-space-5) !important; }
.k2-py-6 { padding-top: var(--k2-space-6) !important; padding-bottom: var(--k2-space-6) !important; }
.k2-py-8 { padding-top: var(--k2-space-8) !important; padding-bottom: var(--k2-space-8) !important; }

.k2-pt-0 { padding-top: var(--k2-space-0) !important; }
.k2-pt-1 { padding-top: var(--k2-space-1) !important; }
.k2-pt-2 { padding-top: var(--k2-space-2) !important; }
.k2-pt-3 { padding-top: var(--k2-space-3) !important; }
.k2-pt-4 { padding-top: var(--k2-space-4) !important; }
.k2-pt-5 { padding-top: var(--k2-space-5) !important; }
.k2-pt-6 { padding-top: var(--k2-space-6) !important; }
.k2-pt-8 { padding-top: var(--k2-space-8) !important; }

.k2-pr-0 { padding-right: var(--k2-space-0) !important; }
.k2-pr-1 { padding-right: var(--k2-space-1) !important; }
.k2-pr-2 { padding-right: var(--k2-space-2) !important; }
.k2-pr-3 { padding-right: var(--k2-space-3) !important; }
.k2-pr-4 { padding-right: var(--k2-space-4) !important; }
.k2-pr-5 { padding-right: var(--k2-space-5) !important; }
.k2-pr-6 { padding-right: var(--k2-space-6) !important; }
.k2-pr-8 { padding-right: var(--k2-space-8) !important; }

.k2-pb-0 { padding-bottom: var(--k2-space-0) !important; }
.k2-pb-1 { padding-bottom: var(--k2-space-1) !important; }
.k2-pb-2 { padding-bottom: var(--k2-space-2) !important; }
.k2-pb-3 { padding-bottom: var(--k2-space-3) !important; }
.k2-pb-4 { padding-bottom: var(--k2-space-4) !important; }
.k2-pb-5 { padding-bottom: var(--k2-space-5) !important; }
.k2-pb-6 { padding-bottom: var(--k2-space-6) !important; }
.k2-pb-8 { padding-bottom: var(--k2-space-8) !important; }

.k2-pl-0 { padding-left: var(--k2-space-0) !important; }
.k2-pl-1 { padding-left: var(--k2-space-1) !important; }
.k2-pl-2 { padding-left: var(--k2-space-2) !important; }
.k2-pl-3 { padding-left: var(--k2-space-3) !important; }
.k2-pl-4 { padding-left: var(--k2-space-4) !important; }
.k2-pl-5 { padding-left: var(--k2-space-5) !important; }
.k2-pl-6 { padding-left: var(--k2-space-6) !important; }
.k2-pl-8 { padding-left: var(--k2-space-8) !important; }




/**
 * ============================================================================
 * 🧭 K2 Centering & Text Alignment Utilities
 * ----------------------------------------------------------------------------
 * These utilities help quickly align block elements, inline elements, or text
 * horizontally, vertically, or both. Mobile-first, flexbox-based where needed.
 * ----------------------------------------------------------------------------
 * Utility Classes:
 * ----------------------------------------------------------------------------
 * 1️⃣ Horizontal Centering:
 *    - .k2-center-x  → Horizontally center a block element (DIV, IMG, TABLE)
 *                      using auto margins.
 *
 * 2️⃣ Vertical Centering:
 *    - .k2-center-y  → Vertically center content using flexbox (apply to container)
 *
 * 3️⃣ Full Centering (Flexbox):
 *    - .k2-center    → Horizontally and vertically center **all children** using flexbox
 *
 * 4️⃣ Hybrid Centering:
 *    - .k2-center-x-y → Horizontally + vertically center a **single block child**
 *                        without affecting other elements in container
 *
 * 5️⃣ Text Alignment:
 *    - .k2-text-center → text-align: center
 *    - .k2-text-left   → text-align: left
 *    - .k2-text-right  → text-align: right
 * ----------------------------------------------------------------------------
 * Usage Examples:
 * ----------------------------------------------------------------------------
 * <!-- Horizontal centering (image or block) -->
 * <img src="logo.png" class="k2-center-x" alt="Logo">
 *
 * <!-- Vertical centering (container flex) -->
 * <div class="k2-center-y" style="height:200px;">
 *   <button class="k2-btn">Click Me</button>
 * </div>
 *
 * <!-- Fully center all children -->
 * <div class="k2-center" style="height:200px;">
 *   <button class="k2-btn">Button 1</button>
 *   <button class="k2-btn">Button 2</button>
 * </div>
 *
 * <!-- Hybrid center (single child block) -->
 * <div class="k2-center-x-y" style="height:200px;">
 *   <div class="k2-card">Card Content</div>
 * </div>
 *
 * <!-- Text alignment -->
 * <p class="k2-text-center">Centered text</p>
 * <p class="k2-text-left">Left aligned text</p>
 * <p class="k2-text-right">Right aligned text</p>
 * ============================================================================
 */

/* Horizontal centering for block elements */
.k2-center-x {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Vertical centering using flexbox */
.k2-center-y {
  display: flex;
  align-items: center; /* vertical alignment */
}

/* Fully center all children using flexbox */
.k2-center {
  display: flex;
  justify-content: center; /* horizontal alignment */
  align-items: center;     /* vertical alignment */
}

/* Hybrid centering: horizontal + vertical for single block child */
.k2-center-x-y {
  display: flex;
  justify-content: center;
  align-items: center;
}
.k2-center-x-y > * {
  margin-left: auto;
  margin-right: auto;
}

/* Text alignment utilities */
.k2-text-center { text-align: center !important; }
.k2-text-left   { text-align: left !important; }
.k2-text-right  { text-align: right !important; }
.k2-text-justify  { text-align: justify !important; }




/**
 * ============================================================================
 * 🖥 K2 Display Utility Classes
 * ----------------------------------------------------------------------------
 * These classes provide atomic control over the `display` property of elements.
 * Use them to quickly switch between block, inline, flex, grid, or hidden layouts.
 * ----------------------------------------------------------------------------
 * Classes:
 *   ✅ .k2-block         → display: block
 *   ✅ .k2-inline        → display: inline
 *   ✅ .k2-inline-block  → display: inline-block
 *   ✅ .k2-flex          → display: flex
 *   ✅ .k2-inline-flex   → display: inline-flex
 *   ✅ .k2-inline-grid   → display: inline-grid
 *   ✅ .k2-hidden        → display: none
 * ----------------------------------------------------------------------------
 * Usage Examples:
 *   1️⃣ Block-level element:
 *        <div class="k2-block">Content</div>
 *
 *   2️⃣ Inline element:
 *        <span class="k2-inline">Text</span>
 *
 *   3️⃣ Flex container:
 *        <div class="k2-flex k2-center">
 *          <div>Item 1</div>
 *          <div>Item 2</div>
 *        </div>
 *
 *   4️⃣ Hidden element (toggle visibility):
 *        <div class="k2-hidden">Hidden content</div>
 *
 * Notes:
 * ----------------------------------------------------------------------------
 * - Keep `.k2-grid` and column classes separate in the Grid System section.
 * - Use these utilities for quick display changes without affecting layout spacing or alignment.
 * ============================================================================
 */
.k2-block        { display: block !important; }
.k2-inline       { display: inline !important; }
.k2-inline-block { display: inline-block !important; }
.k2-flex         { display: flex !important; }
.k2-inline-flex  { display: inline-flex !important; }
.k2-inline-grid  { display: inline-grid !important; }
.k2-hidden       { display: none !important; }




/**
 * ============================================================================
 * 🟦 K2 Grid System - Mobile-First
 * ----------------------------------------------------------------------------
 * Provides a 12-column responsive grid using Flexbox. Designed to work
 * seamlessly with the K2 utility framework and responsive breakpoints.
 * ----------------------------------------------------------------------------
 * Grid Container:
 *   ✅ .k2-grid → Sets up a flex container with wrap, gap, and alignment
 *
 * Grid Columns:
 *   ✅ .k2-col-s1  → 1/12 width (8.3333%)
 *   ✅ .k2-col-s2  → 2/12 width (16.6667%)
 *   ...
 *   ✅ .k2-col-s12 → Full width (100%)
 *
 * Notes:
 * ----------------------------------------------------------------------------
 * 1️⃣ The grid is mobile-first. Columns stack naturally on small screens.
 * 2️⃣ Use `.k2-grid` on a container to enable the grid.
 * 3️⃣ Column classes (`.k2-col-s*`) define the width based on a 12-column system.
 * 4️⃣ Gap and padding are applied automatically to maintain gutters.
 * 5️⃣ Avoid using `.k2-grid` display utilities outside grid context.
 * ============================================================================
 *
 * Usage Examples
 * ----------------------------------------------------------------------------
 * 1️⃣ Basic 3-column layout:
 * <div class="k2-grid">
 *   <div class="k2-col-s4">Column 1</div>
 *   <div class="k2-col-s4">Column 2</div>
 *   <div class="k2-col-s4">Column 3</div>
 * </div>
 *
 * 2️⃣ Two uneven columns:
 * <div class="k2-grid">
 *   <div class="k2-col-s8">Wide column</div>
 *   <div class="k2-col-s4">Narrow column</div>
 * </div>
 *
 * 3️⃣ Nested grid:
 * <div class="k2-grid">
 *   <div class="k2-col-s6">
 *     Parent Column
 *     <div class="k2-grid">
 *       <div class="k2-col-s6">Nested 1</div>
 *       <div class="k2-col-s6">Nested 2</div>
 *     </div>
 *   </div>
 *   <div class="k2-col-s6">Parent Column</div>
 * </div>
 *
 * Notes:
 * - Adjust column widths using `.k2-col-s*` classes.
 * - Combine with spacing and alignment utilities for flexible layouts.
 * ============================================================================
 */

/* Grid container */
.k2-grid {
  display: flex;                  /* Flexbox layout */
  flex-wrap: wrap;                /* Wrap columns to next line */
  margin-left: -0.75rem;          /* Offset column padding */
  margin-right: -0.75rem;
  justify-content: center;        /* Center items by default */
  gap: 1.25rem !important;        /* Gutter between items */
  align-items: stretch !important;
}

/* Grid column base */
[class*="k2-col-s"] {
  padding-left: 0.75rem;          /* Column gutter */
  padding-right: 0.75rem;
  margin-bottom: 1.25rem;
  box-sizing: border-box;         /* Ensure padding doesn't break layout */
  flex: 0 0 auto;                 /* Prevent columns from shrinking unexpectedly */
}

/* Small (mobile) column widths - 12-column system */
.k2-col-s1  { width: 8.3333%; }
.k2-col-s2  { width: 16.6667%; }
.k2-col-s3  { width: 25%; }
.k2-col-s4  { width: 33.3333%; }
.k2-col-s5  { width: 41.6667%; }
.k2-col-s6  { width: 50%; }
.k2-col-s7  { width: 58.3333%; }
.k2-col-s8  { width: 66.6667%; }
.k2-col-s9  { width: 75%; }
.k2-col-s10 { width: 83.3333%; }
.k2-col-s11 { width: 91.6667%; }
.k2-col-s12 { width: 100%; }



/* ============================================================================
   📐 K2 Responsive Grid System
   ----------------------------------------------------------------------------
   Mobile-first 12-column flexbox grid.
   - Base: .k2-grid, .k2-col-s1 → .k2-col-s12
   - Tablet: .k2-col-m1 → .k2-col-m12
   - Laptop: .k2-col-l1 → .k2-col-l12
   - Desktop: .k2-col-xl1 → .k2-col-xl12
   - Ultra-Wide: .k2-col-2xl1 → .k2-col-2xl12
   ----------------------------------------------------------------------------
   Usage:
   <div class="k2-grid">
     <div class="k2-col-s12 k2-col-m6 k2-col-l4">Column 1</div>
     <div class="k2-col-s12 k2-col-m6 k2-col-l4">Column 2</div>
     <div class="k2-col-s12 k2-col-m12 k2-col-l4">Column 3</div>
   </div>
   ----------------------------------------------------------------------------
   Notes:
   - Mobile-first: small screens use `.k2-col-s*` widths by default.
   - Columns automatically wrap; gutters handled by padding + negative margins on .k2-grid.
===========================================================================*/

/* ------------------------------
   Tablet / Medium (≥768px)
------------------------------ */
@media (min-width: 768px) {
  .k2-col-m1  { width: 8.3333%; }
  .k2-col-m2  { width: 16.6667%; }
  .k2-col-m3  { width: 25%; }
  .k2-col-m4  { width: 33.3333%; }
  .k2-col-m5  { width: 41.6667%; }
  .k2-col-m6  { width: 50%; }
  .k2-col-m7  { width: 58.3333%; }
  .k2-col-m8  { width: 66.6667%; }
  .k2-col-m9  { width: 75%; }
  .k2-col-m10 { width: 83.3333%; }
  .k2-col-m11 { width: 91.6667%; }
  .k2-col-m12 { width: 100%; }
}

/* ------------------------------
   Desktop / Large (≥1024px)
------------------------------ */
@media (min-width: 1024px) {
  .k2-col-l1  { width: 8.3333%; }
  .k2-col-l2  { width: 16.6667%; }
  .k2-col-l3  { width: 25%; }
  .k2-col-l4  { width: 33.3333%; }
  .k2-col-l5  { width: 41.6667%; }
  .k2-col-l6  { width: 50%; }
  .k2-col-l7  { width: 58.3333%; }
  .k2-col-l8  { width: 66.6667%; }
  .k2-col-l9  { width: 75%; }
  .k2-col-l10 { width: 83.3333%; }
  .k2-col-l11 { width: 91.6667%; }
  .k2-col-l12 { width: 100%; }
}

/* ------------------------------
   Extra-Large / XL (≥1280px)
------------------------------ */
@media (min-width: 1280px) {
  .k2-col-xl1  { width: 8.3333%; }
  .k2-col-xl2  { width: 16.6667%; }
  .k2-col-xl3  { width: 25%; }
  .k2-col-xl4  { width: 33.3333%; }
  .k2-col-xl5  { width: 41.6667%; }
  .k2-col-xl6  { width: 50%; }
  .k2-col-xl7  { width: 58.3333%; }
  .k2-col-xl8  { width: 66.6667%; }
  .k2-col-xl9  { width: 75%; }
  .k2-col-xl10 { width: 83.3333%; }
  .k2-col-xl11 { width: 91.6667%; }
  .k2-col-xl12 { width: 100%; }
}

/* ------------------------------
   Ultra-Wide / 2XL (≥1536px)
------------------------------ */
@media (min-width: 1536px) {
  .k2-col-2xl1  { width: 8.3333%; }
  .k2-col-2xl2  { width: 16.6667%; }
  .k2-col-2xl3  { width: 25%; }
  .k2-col-2xl4  { width: 33.3333%; }
  .k2-col-2xl5  { width: 41.6667%; }
  .k2-col-2xl6  { width: 50%; }
  .k2-col-2xl7  { width: 58.3333%; }
  .k2-col-2xl8  { width: 66.6667%; }
  .k2-col-2xl9  { width: 75%; }
  .k2-col-2xl10 { width: 83.3333%; }
  .k2-col-2xl11 { width: 91.6667%; }
  .k2-col-2xl12 { width: 100%; }
}
