@charset "utf-8";
/* =========================================
   KHALEEJ PACK – Custom UI Enhancements
   Brand primary: #0046b9
   ========================================= */

:root{
  --kp-primary:#0046b9;
  --kp-primary-700:#003fa7;
  --kp-primary-800:#063077;
  --kp-navy:#0a1730;        /* section bg */
  --kp-navy-2:#0f2347;      /* panel bg */
  --kp-text-on-dark:#f5f7fb;
  --kp-text-dim:#c7d3ea;
  --kp-text:#111;
  --kp-text-dim-2:#444;
}

/* -----------------------------------------
   Global section gaps
   ----------------------------------------- */
.kp-section-gap{padding-top:70px;padding-bottom:70px;}
.kp-section-gap-top{padding-top:70px;}
.kp-section-gap-bottom{padding-bottom:70px;}
@media (max-width:991px){
  .kp-section-gap,.kp-section-gap-top,.kp-section-gap-bottom{padding-top:48px;padding-bottom:48px;}
}
@media (max-width:575px){
  .kp-section-gap,.kp-section-gap-top,.kp-section-gap-bottom{padding-top:38px;padding-bottom:38px;}
}

/* Utility: divider */
.kp-divider-line{height:1px;background:linear-gradient(90deg,rgba(0,70,185,.18),rgba(0,70,185,.08));margin:18px 0;}

/* =========================================
   Feature Cards (About 01/02/03)
   ========================================= */
.kp-feature-cards .kp-card{
  position:relative;background:#fff;border:1px solid #ececec;border-radius:14px;
  padding:26px 22px 24px;height:100%;box-shadow:0 8px 24px rgba(11,17,31,.06);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.kp-feature-cards .kp-card:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(11,17,31,.12);border-color:rgba(0,70,185,.18);}
.kp-feature-cards .kp-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.kp-feature-cards .kp-ico-wrap{
  position:relative;width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg,var(--kp-primary) 0%,var(--kp-primary-700) 100%);box-shadow:0 6px 16px rgba(0,70,185,.28);color:#fff;
}
.kp-feature-cards .kp-ico-wrap i{font-size:28px;line-height:1;opacity:.95;}
.kp-feature-cards .kp-num{font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:900;font-size:18px;letter-spacing:.02em;color:var(--kp-primary);}
.kp-feature-cards .kp-title{margin:0;font-weight:700;font-size:16px;color:var(--kp-text);text-transform:uppercase;}
.kp-feature-cards .kp-text{margin:8px 0 0 0;color:var(--kp-text-dim-2);font-size:14.5px;line-height:1.7;}
.kp-feature-cards .kp-divider{height:1px;background:linear-gradient(90deg,rgba(0,70,185,.15),rgba(0,70,185,.08));margin:14px 0 10px 0;}
.kp-feature-cards .kp-card:hover .kp-ico-wrap{box-shadow:0 10px 24px rgba(0,70,185,.36);}
@media (max-width:767px){
  .kp-feature-cards .kp-card{padding:20px 18px;}
  .kp-feature-cards .kp-ico-wrap{width:54px;height:54px;}
  .kp-feature-cards .kp-ico-wrap i{font-size:26px;}
}
@media (prefers-reduced-motion:reduce){
  .kp-feature-cards .kp-card,.kp-feature-cards .kp-card:hover{transition:none;transform:none;}
}

/* =========================================
   Company Overview Split (Framed variation)
   ========================================= */
section.kp-about-split{padding-top:64px !important;padding-bottom:64px !important;}
.kp-about-split{background:var(--kp-navy);position:relative;}
@media (max-width:991px){.kp-about-split{padding-top:50px !important;padding-bottom:50px !important;}}
@media (max-width:575px){.kp-about-split{padding-top:38px !important;padding-bottom:38px !important;}}

/* kill any old angled-edge decoration from theme */
.kp-about-split .cover-background::after{display:none !important;}

/* ===== FEATURE SPLIT – Framed balanced layout (53% / 47%) ===== */
.kp-about--framed{
  background:var(--kp-navy);
  padding-top:80px !important;
  padding-bottom:80px !important;
}
.kp-about--framed .kp-frame{
  position:relative;
  border:5px solid #fff;
  border-radius:28px;
  padding:16px;
  max-width:1220px;
  margin:0 auto;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  background:transparent;

  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
}

/* Left photo column (53%) */
.kp-about--framed .kp-photo-wrap{
  flex:0 0 53%;
  max-width:53%;
  display:flex;
  align-items:center;
  z-index:2;
}
.kp-about--framed .kp-photo{
  width:100%;
  height:430px;
  border-radius:22px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#0f1c34;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}

/* Right content (47%) */
.kp-about--framed .kp-content{
  flex:0 0 50%;
  max-width:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:3;
  margin-left:-3%;
}

/* Panel styling */
.kp-about--framed .kp-panel{
  width:100%;
  min-height:430px;
  background:linear-gradient(180deg,rgba(15,35,71,.96),rgba(15,35,71,.90));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:36px 32px;
  box-shadow:0 20px 45px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Accent bar + text */
.kp-about--framed .kp-accent-bar{
  width:64px;height:4px;border-radius:4px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--kp-primary),var(--kp-primary-700));
  box-shadow:0 4px 10px rgba(0,70,185,.35);
}
.kp-about--framed .kp-subtitle{display:inline-block;margin:6px 0 10px;color:var(--kp-text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.kp-about--framed .kp-welcome{color:#fff;font-weight:800;text-transform:uppercase;margin-bottom:16px;}
.kp-about--framed .kp-text{color:var(--kp-text-on-dark);opacity:.92;line-height:1.85;font-size:15px;}

/* Button */
.kp-about--framed .kp-btn{
  background:var(--kp-primary) !important;border:0 !important;color:#fff !important;font-weight:700;
  letter-spacing:.02em;padding:10px 18px;border-radius:8px;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.kp-about--framed .kp-btn:hover{background:var(--kp-primary-700) !important;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,70,185,.35);}

/* Responsive */
@media (max-width:1199px){
  .kp-about--framed .kp-photo{height:380px;}
  .kp-about--framed .kp-content{margin-left:-2%;}
}
@media (max-width:991px){
  .kp-about--framed .kp-frame{flex-direction:column;}
  .kp-about--framed .kp-photo-wrap,
  .kp-about--framed .kp-content{max-width:100%;flex:0 0 100%;margin-left:0;}
  .kp-about--framed .kp-photo{height:340px;margin-bottom:20px;}
  .kp-about--framed .kp-panel{min-height:auto;padding:26px 22px;}
}
@media (max-width:575px){
  .kp-about--framed{padding-top:50px !important;padding-bottom:50px !important;}
  .kp-about--framed .kp-photo{height:280px;border-radius:18px;}
  .kp-about--framed .kp-frame{padding:12px;border-width:4px;}
}

/* =========================================
   INDUSTRIES SECTION
   ========================================= */
:root{
  --kp-primary:#0046b9;
  --kp-primary-700:#003fa7;
  --kp-navy:#0a1730;
  --kp-ink:#0f2240;
  --kp-muted:#6a7aa1;
  --kp-tile:#f6f8fb;
  --kp-line:#e7ecf5;
}
.kp-industries{background:#f7f9fc;}
.kp-industries .container{max-width:1220px;margin:0 auto;padding:0 15px;}
.kp-ind-title{
  margin:0 0 20px 0;
  font-weight:800; letter-spacing:.01em;
  color:#15305a; font-size:clamp(24px,3.6vw,44px);
}
.kp-ind-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(7, minmax(140px,1fr));
  margin:10px 0 0 0; padding:0;
	font-size: 25px;
}
@media (max-width:1199px){ .kp-ind-grid{grid-template-columns:repeat(5,1fr);} }
@media (max-width:991px){  .kp-ind-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:767px){  .kp-ind-grid{grid-template-columns:repeat(2,1fr);} }

/* ===== Cards ===== */
.ind-card{
  list-style:none; background:#fff;
  border:1px solid var(--kp-line);
  border-radius:14px; padding:26px 14px 22px;
  text-align:center; position:relative; overflow:hidden;
  box-shadow:0 6px 20px rgba(15,34,64,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ind-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--kp-primary),var(--kp-primary-700)); opacity:0; transition:opacity .18s ease;
}
.ind-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,70,185,.22);
  box-shadow:0 14px 36px rgba(15,34,64,.12);
}
.ind-card:hover::after{opacity:1;}
.ind-name{
  display:block; margin-top:12px; font-weight:700;
  color:#1a2f54; font-size:14px; letter-spacing:.01em;
}

/* ===== Icon base ===== */
.ind-ico{
  --s:56px;
  width:var(--s); height:var(--s);
  margin:6px auto 0; position:relative;
  color:var(--kp-primary);
}

/* ---------- ORIGINAL CSS-ONLY ICON SHAPES (kept for reference) ----------
   (these rules are preserved below but will be neutralized by the
    Font Awesome override block that follows — so they won't conflict.)
--------------------------------------------------------------------------- */

/* === 01 Foodservice: cloche === */
.i-food{
  border:3px solid currentColor; border-top-left-radius:56px; border-top-right-radius:56px;
  border-bottom:none; width:50px; height:28px; left:50%; transform:translateX(-50%); top:16px;
}
.i-food::before{ /* knob */
  width:8px;height:8px;border-radius:50%;background:currentColor;top:-8px;left:50%;transform:translateX(-50%);
}
.i-food::after{ /* base */
  width:56px;height:0;border-top:3px solid currentColor;bottom:-6px;left:50%;transform:translateX(-50%);
}

/* === 02 Cafés & Catering: cup === */
.i-cafe{
  width:40px;height:28px;border:3px solid currentColor;border-top:none;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  left:50%;top:16px;transform:translateX(-50%);
}
.i-cafe::before{ /* handle */
  width:14px;height:14px;border:3px solid currentColor;border-left:none;border-radius:0 12px 12px 0; right:-16px; top:4px;
}
.i-cafe::after{ /* steam */
  width:12px;height:12px;border-right:3px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent;
  top:-12px; left:6px; border-radius:10px;
  box-shadow:10px -6px 0 -2px currentColor, 20px -10px 0 -4px currentColor;
}

/* === 03 Retail: store awning === */
.i-retail{
  width:48px;height:28px; left:50%; transform:translateX(-50%); top:18px;
  background:repeating-linear-gradient(90deg,currentColor 0 8px, transparent 8px 14px);
  border:3px solid currentColor; border-bottom:none; border-top-left-radius:8px;border-top-right-radius:8px;
}
.i-retail::before{ /* door */
  width:10px;height:12px;border:3px solid currentColor; bottom:-15px; left:6px; background:#fff;
}
.i-retail::after{ /* window */
  width:12px;height:10px;border:3px solid currentColor; bottom:-14px; right:6px; background:#fff;
}

/* === 04 Hospitality: hotel building === */
.i-hotel{
  width:42px;height:32px;border:3px solid currentColor;border-radius:6px; left:50%; transform:translateX(-50%); top:16px;
  box-shadow: inset 0 -10px 0 0 rgba(0,70,185,.08);
}
.i-hotel::before{ /* windows */
  content:""; position:absolute; inset:6px; background:
    radial-gradient(circle at 8px 8px,currentColor 2px,transparent 3px) 0 0/16px 12px,
    radial-gradient(circle at 8px 8px,currentColor 2px,transparent 3px) 0 12px/16px 12px;
  opacity:.9;
}
.i-hotel::after{ /* door */
  width:12px;height:12px;border:3px solid currentColor; bottom:-15px; left:50%; transform:translateX(-50%); background:#fff;
}

/* === 05 Public Sector: pillars === */
.i-gov{
  width:48px;height:8px;background:currentColor; border-radius:8px; top:14px; left:50%; transform:translateX(-50%);
}
.i-gov::before{
  width:44px;height:18px; border-bottom:3px solid currentColor; top:10px; left:50%; transform:translateX(-50%);
  box-shadow: -16px 8px 0 -8px currentColor, 0 8px 0 -8px currentColor, 16px 8px 0 -8px currentColor; /* pillars hint */
}
.i-gov::after{
  width:56px;height:0;border-top:3px solid currentColor; bottom:-10px; left:50%; transform:translateX(-50%);
}

/* === 06 Bakery: cupcake === */
.i-bakery{
  width:40px;height:22px;border:3px solid currentColor;border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-top:none;
  left:50%;top:22px;transform:translateX(-50%);
}
.i-bakery::before{ /* frosting */
  width:38px;height:20px; left:50%; transform:translateX(-50%); top:-18px;
  background:
    radial-gradient(circle at 10px 10px,currentColor 3px,transparent 4px),
    radial-gradient(circle at 20px 8px,currentColor 3px,transparent 4px),
    radial-gradient(circle at 28px 10px,currentColor 3px,transparent 4px);
  border-top-left-radius:20px;border-top-right-radius:20px;
}
.i-bakery::after{ /* candles dots */
  width:3px;height:6px;background:currentColor; top:-22px; left:50%; border-radius:2px; box-shadow: -10px 6px 0 0 currentColor, 10px 6px 0 0 currentColor;
}

/* === 07 Healthcare: building + cross === */
.i-health{
  width:42px;height:30px;border:3px solid currentColor;border-radius:6px; left:50%; transform:translateX(-50%); top:18px;
}
.i-health::before{ /* cross */
  width:18px;height:18px; border:3px solid currentColor; border-radius:4px;
  top:-12px; left:50%; transform:translateX(-50%);
  background: linear-gradient(currentColor, currentColor) center/12px 3px no-repeat,
              linear-gradient(currentColor, currentColor) center/3px 12px no-repeat;
}
.i-health::after{ /* door */
  width:12px;height:12px;border:3px solid currentColor; bottom:-15px; left:50%; transform:translateX(-50%); background:#fff;
}

/* === 08 Travel: plane === */
.i-travel{
  width:0;height:0; border-left:26px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent;
  left:50%; top:26px; transform:translateX(-50%);
}
.i-travel::before{ /* tail */
  width:12px;height:3px;background:currentColor; left:-10px; top:-9px; transform:rotate(35deg);
}
.i-travel::after{ /* trail */
  width:40px;height:0;border-top:3px dashed currentColor; left:-46px; top:1px; opacity:.7;
}

/* === 09 Industry: factory === */
.i-industry{
  width:44px;height:26px;border:3px solid currentColor;border-bottom-left-radius:6px;border-bottom-right-radius:6px;
  left:50%;top:22px;transform:translateX(-50%);
  background: linear-gradient(135deg,currentColor 10px,transparent 0) -4px -6px/18px 18px repeat-x;
}
.i-industry::before{ /* chimney */
  width:8px;height:18px;border:3px solid currentColor; left:-6px; top:-14px;
}
.i-industry::after{ /* smoke */
  width:10px;height:10px; border:3px solid currentColor; border-radius:50%; left:-10px; top:-26px;
  box-shadow: -8px -6px 0 -2px currentColor;
}

/* === 10 Marine & Cargo: ship === */
.i-marine{
  width:46px;height:18px; left:50%; transform:translateX(-50%); top:28px;
  background:
    linear-gradient(currentColor,currentColor) 6px 2px/8px 3px no-repeat,
    linear-gradient(currentColor,currentColor) 18px 2px/8px 3px no-repeat,
    linear-gradient(currentColor,currentColor) 30px 2px/8px 3px no-repeat;
  border-bottom:3px solid currentColor; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
}
.i-marine::before{ /* bow */
  width:16px;height:12px;border:3px solid currentColor;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px; left:14px; top:-12px;
}
.i-marine::after{ /* waves */
  width:60px;height:0;border-top:3px dotted currentColor; bottom:-8px; left:50%; transform:translateX(-50%);
}

/* === 11 Cloud Kitchens: chef hat === */
.i-cloud{
  width:42px;height:16px;border:3px solid currentColor;border-top:none;border-bottom-left-radius:10px;border-bottom-right-radius:10px;
  left:50%; top:30px; transform:translateX(-50%);
}
.i-cloud::before{
  width:40px;height:20px; left:50%; transform:translateX(-50%); top:-18px;
  background:
    radial-gradient(circle at 8px 12px,currentColor 4px,transparent 5px),
    radial-gradient(circle at 20px 10px,currentColor 4px,transparent 5px),
    radial-gradient(circle at 32px 12px,currentColor 4px,transparent 5px);
}

/* === 12 E-Commerce: shopping bag === */
.i-commerce{
  width:30px;height:28px;border:3px solid currentColor;border-radius:4px; left:50%; top:18px; transform:translateX(-50%);
}
.i-commerce::before{ /* handles */
  width:18px;height:12px;border:3px solid currentColor;border-bottom:none;border-top-left-radius:12px;border-top-right-radius:12px; left:50%; top:-12px; transform:translateX(-50%);
}
.i-commerce::after{ /* bottom line */
  width:40px;height:0;border-top:3px solid currentColor; bottom:-8px; left:50%; transform:translateX(-50%); opacity:.7;
}

/* === 13 Facility Services: building + wrench === */
.i-facility{
  width:40px;height:28px;border:3px solid currentColor;border-radius:6px; left:50%; top:18px; transform:translateX(-50%);
}
.i-facility::before{ /* wrench */
  width:22px;height:22px;border:3px solid currentColor;border-radius:50%; right:-10px; top:-10px;
  box-shadow: inset -8px 0 0 -6px #fff;
}
.i-facility::after{ /* handle */
  width:12px;height:3px;background:currentColor; right:-2px; top:4px; transform:rotate(45deg);
}

/* === 14 More (13+): badge === */
.i-more{
  width:44px;height:44px;border:3px dashed currentColor;border-radius:50%; left:50%; top:6px; transform:translateX(-50%);
}
.i-more::before{
  content:"+";
  position:absolute; inset:0; display:grid; place-items:center;
  font:700 18px/44px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:currentColor;
}

/* ===== FIX: perfect center + consistent sizing for industry tiles ===== */

/* Card: equal height, true center */
.kp-industries .ind-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;     /* vertical centering */
  gap:12px;                   /* even space between icon and title */
  min-height:160px;           /* consistent tile height */
  padding:18px 14px;          /* tidy inner padding */
}

/* Icon wrapper: centered, no offsets */
.kp-industries .ind-ico{
  --s:56px;
  width:var(--s);
  height:var(--s);
  margin:0 auto;              /* horizontal center */
  position:relative;
}

/* Remove any previous left/top/translate offsets on the icon ROOT.
   (Keeps pseudo-elements positioning intact.) */
.kp-industries .ind-ico[class^="i-"],
.kp-industries .ind-ico[class*=" i-"]{
  left:auto !important;
  top:auto !important;
  transform:none !important;
}

/* Title: center and consistent spacing */
.kp-industries .ind-name{
  margin:0;                   /* reset old margins */
  line-height:1.25;
  text-align:center;
  font-weight:700;
  font-size:14px;
  color:#1a2f54;
}

/* Make all tiles look uniform on small screens too */
@media (max-width: 575px){
  .kp-industries .ind-card{ min-height:140px; gap:10px; }
}

/* ============================
   FONT AWESOME ICONS: override + styling
   (replaces the CSS-only pseudo art with FA <i> elements inside .ind-ico)
   ============================ */

/* Reset any legacy pseudo-shape interference (neutralize previous ::before/::after art) */
.kp-industries .ind-ico,
.kp-industries .ind-ico::before,
.kp-industries .ind-ico::after,
.kp-industries .ind-ico[class^="i-"]::before,
.kp-industries .ind-ico[class^="i-"]::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  content: none !important;
  display: block;
  position: static !important;
}

/* Wrapper: visual container for the FA icon */
.kp-industries .ind-ico{
  --s:64px;                      /* container size */
  width:var(--s);
  height:var(--s);
  display:grid;
  place-items:center;
  margin:0 auto;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(0,70,185,0.06), rgba(0,70,185,0.02));
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  position:relative;
}

/* Font Awesome <i> inside the wrapper */
.kp-industries .ind-ico i{
  font-size:22px;
  line-height:1;
  color:var(--kp-primary);
  display:inline-block;
  transition: transform .18s ease, color .18s ease;
  width:1em;
  height:1em;
  text-align:center;
}

/* Larger on desktop */
@media (min-width: 992px){
  .kp-industries .ind-ico{ --s:68px; }
  .kp-industries .ind-ico i{ font-size:26px; }
}

/* Hover: lift + color shift */
.kp-industries .ind-card:hover .ind-ico{
  transform: translateY(-6px);
  background: linear-gradient(180deg, rgba(0,70,185,0.10), rgba(0,70,185,0.03));
  box-shadow: 0 12px 34px rgba(0,70,185,0.08);
}
.kp-industries .ind-card:hover .ind-ico i{
  color: var(--kp-primary-700);
  transform: scale(1.06);
}

/* Optional: per-category color accents (apply by adding same class to .ind-card or keep old i-* class) */
.kp-industries .ind-card.healthcare .ind-ico i,
.kp-industries .ind-ico.i-health i { color: #d64545; }  /* healthcare red */
.kp-industries .ind-card.marine .ind-ico i,
.kp-industries .ind-ico.i-marine i { color: #0a6fb5; }    /* marine blue */
.kp-industries .ind-card.bakery .ind-ico i,
.kp-industries .ind-ico.i-bakery i { color: #c17c2f; }    /* bakery warm */

/* Small screen: reduce sizes */
@media (max-width: 575px){
  .kp-industries .ind-ico{ --s:54px; border-radius:10px; }
  .kp-industries .ind-ico i{ font-size:20px; }
}

/* Accessibility: FA icons decorative when aria-hidden="true" */
.kp-industries .ind-ico i[aria-hidden="true"]{ pointer-events:none; }

/* If you prefer circular icon background: add .circle to .ind-ico */
.kp-industries .ind-ico.circle{ border-radius:50%; }

/* Keep the card layout consistent (redeclared to be safe) */
.kp-industries .ind-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:160px;
  padding:18px 14px;
}

/* NOTE:
   - Replace the inner .ind-ico content in your HTML with:
       <div class="ind-ico"><i class="fa-solid fa-utensils" aria-hidden="true"></i></div>
     (use the icon mapping you prefer — examples listed in previous message)
   - Make sure Font Awesome CSS is included in the page head.
*/

/* ===== INSIGHTS BALANCED GRID ===== */

/* ============================
   KHALEEJ PACK – Collections Scroll
   ============================ */

.kp3-section-gap {
  padding: 80px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.kp3-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.kp3-controls {
  display: flex;
  gap: 10px;
}

.kp3-btn {
  background: var(--kp-primary, #0046b9);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease;
}

.kp3-btn:hover {
  background: var(--kp-primary-700, #003fa7);
}

/* Rail & Scrolling Layout */
.kp3-rail-wrap {
  position: relative;
  overflow: hidden;
}

.kp3-rail {
  display: flex;
  gap: 24px;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 10px;
}

.kp3-rail::-webkit-scrollbar {
  display: none;
}

/* Cards */
.kp3-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 260px;
  min-width: 260px;
  background: #fff;
  border: 1px solid #e3e6ed;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kp3-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.kp3-img {
  display: block;
  position: relative;
  padding: 20px;
}

.kp3-img img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.kp3-card:hover .kp3-img img {
  transform: scale(1.05);
}

.kp3-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.kp3-name {
  font-weight: 700;
  color: #0a1730;
  font-size: 14px;
  margin-bottom: 16px;
}

.kp3-cta {
  margin-top: auto;
}

.kp3-cta-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--kp-primary, #0046b9);
  color: #fff;
  font-weight: 600;
  border-radius: 25px;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
  transition: background 0.3s ease;
}

.kp3-cta-btn:hover {
  background: var(--kp-primary-700, #003fa7);
}

/* Fading edges for visual cue */
.kp3-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 5;
}

.kp3-left {
  left: 0;
  background: linear-gradient(to right, #fff 60%, );
}

.kp3-right {
  right: 0;
  background: linear-gradient(to left, #fff 60%, );
}

/* Responsive */
@media (max-width: 991px) {
  .kp3-card {
    width: 220px;
    min-width: 220px;
  }
}

/* Responsive */

@media (max-width: 767px) {
  .kp3-card {
    width: 180px;
    min-width: 180px;
  }

  .kp3-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .kp3-head h2 {
    font-size: 30px !important;
  }
}


 
  /* ==========================================================================
   KHALEEJ PACK — Manufacture Section (Scoped & Conflict-Resistant)
   Drop this after your main CSS to override conflicting rules.
   ========================================================================== */

.kp-manufacture-section { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; position:relative; width:100%; overflow:hidden; box-sizing:border-box; }

/* Background layer */
.kp-manufacture-section .kp-manufacture-bg {
  position:absolute !important;
  inset:0 !important;
  background-image: url('../categories/bg.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  z-index:0 !important;
  min-height:520px !important;
  pointer-events:none;
}

/* overlay for contrast */
.kp-manufacture-section::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background: linear-gradient(180deg, rgba(11,34,86,.62) 0%, rgba(6,24,62,.72) 100%) !important;
  z-index:1 !important;
  pointer-events:none;
}

/* inner content container */
.kp-manufacture-section .kp-manufacture-inner {
  position:relative !important;
  z-index:2 !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:80px 20px 100px !important;
  box-sizing:border-box !important;
}

/* Title */
.kp-manufacture-section .kp-manufacture-head h2 {
  font-family: "Montserrat", sans-serif !important;
  font-weight:800 !important;
  color:#ffffff !important;
  margin:0 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
  letter-spacing: -0.02em !important;
}

/* Stats block — gap of ~130px below title handled via margin-top */
.kp-manufacture-section .kp-manufacture-stats {
  margin-top:130px !important;
  display:flex !important;
  gap:36px !important;
  justify-content:space-between !important;
  align-items:center !important;
  color:#fff !important;
  text-shadow:0 4px 14px rgba(0,0,0,.45) !important;
  box-sizing:border-box !important;
}

/* Each stat */
.kp-manufacture-section .kp-manufacture-stats .kp-stat {
  flex:1 1 0 !important;
  min-width:160px !important;
  text-align:left !important;
}
.kp-manufacture-section .kp-manufacture-stats .kp-stat-num {
  font-weight:800 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  color:#fff !important;
  margin-bottom:6px !important;
  font-family:"Montserrat", sans-serif !important;
}
.kp-manufacture-section .kp-manufacture-stats .kp-stat-label {
  font-weight:500 !important;
  font-size:13px !important;
  color: rgba(255,255,255,.92) !important;
  opacity:.95 !important;
}

/* Products row: 3 equal columns, equal height cards */
.kp-manufacture-section .kp-products-row {
  margin-top:48px !important;
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:24px !important;
  align-items:stretch !important;
  box-sizing:border-box !important;
}

/* Ensure product cards are independent of global card styles */
.kp-manufacture-section .kp-product-card {
  background: rgba(255,255,255,0.98) !important;
  border-radius: 18px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:420px !important;
  box-shadow:0 18px 40px rgba(3,14,40,0.12) !important;
  border: 6px solid rgba(255,255,255,0.95) !important; /* curved white frame */
  text-decoration:none !important;
  color:inherit !important;
  box-sizing:border-box !important;
}

/* Media area */
.kp-manufacture-section .kp-product-media {
  width:100% !important;
  height:210px !important;
  overflow:hidden !important;
  border-bottom:1px solid rgba(0,0,0,0.04) !important;
  display:block !important;
  background:#f4f6f8 !important;
}
.kp-manufacture-section .kp-product-media img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition: transform .45s ease !important;
}
.kp-manufacture-section .kp-product-card:hover .kp-product-media img {
  transform: scale(1.03) !important;
}

/* Body area */
.kp-manufacture-section .kp-product-body {
  padding:20px 22px !important;
  flex:1 1 auto !important;
  box-sizing:border-box !important;
}
.kp-manufacture-section .kp-product-title {
  margin:0 0 10px 0 !important;
  font-weight:700 !important;
  color:#0b2140 !important;
  font-size:16px !important;
  letter-spacing:.02em !important;
}
.kp-manufacture-section .kp-product-desc {
  margin:0 !important;
  color:#263447 !important;
  font-size:14px !important;
  line-height:1.6 !important;
}

/* CTA area fixed height to align buttons across cards */
.kp-manufacture-section .kp-product-cta {
  padding:18px 22px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  background:transparent !important;
  box-sizing:border-box !important;
}
.kp-manufacture-section .kp-whatsapp-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  text-decoration:none !important;
  background:#25D366 !important;
  color:#fff !important;
  font-weight:700 !important;
  padding:12px 18px !important;
  border-radius:10px !important;
  min-height:48px !important;
  width:100% !important;
  box-shadow:0 8px 18px rgba(37,211,102,0.18) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  border:0 !important;
  text-align:center !important;
}
.kp-manufacture-section .kp-whatsapp-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(37,211,102,0.2) !important;
}

/* Small adjustments for long text to keep uniform heights */
.kp-manufacture-section .kp-product-body,
.kp-manufacture-section .kp-product-desc { min-height: 110px !important; }

/* Responsive behavior */
@media (max-width:1100px) {
  .kp-manufacture-section .kp-manufacture-stats { gap:20px !important; }
  .kp-manufacture-section .kp-products-row { gap:18px !important; }
}

@media (max-width:900px) {
  .kp-manufacture-section .kp-manufacture-inner { padding:60px 18px !important; }
  .kp-manufacture-section .kp-manufacture-stats { flex-direction:column !important; align-items:flex-start !important; gap:14px !important; margin-top:38px !important; }
  .kp-manufacture-section .kp-products-row { grid-template-columns: 1fr !important; }
  .kp-manufacture-section .kp-product-card { min-height:auto !important; }
  .kp-manufacture-section .kp-product-media { height:260px !important; }
  .kp-manufacture-section .kp-manufacture-head h2 { text-align:left !important; }
}

@media (max-width:520px) {
  .kp-manufacture-section .kp-manufacture-head h2 { font-size:24px !important; }
  .kp-manufacture-section .kp-product-media { height:200px !important; }
  .kp-manufacture-section .kp-whatsapp-btn { min-height:46px !important; font-size:14px !important; }
}

/* Accessibility: ensure focus styles remain visible */
.kp-manufacture-section .kp-whatsapp-btn:focus { outline:3px solid rgba(37,211,102,0.35) !important; outline-offset:2px !important; }

/* Safety net: undo common global selectors that might interfere */
.kp-manufacture-section .kp-product-card * { box-sizing:border-box !important; }

/* End of manufacture-section scoped CSS */