/* ============================================================
   Elborani Foods — shared stylesheet
   Colors derived from actual product packaging / logo assets:
     forest-green : sampled from packaging banners (base) + exact
                     hover shade #0F3A1A taken directly from source code
     warm-gold    : sampled from packaging gold accents (base) + exact
                     hover shade #C49560 taken directly from source code
     pro-blue     : brand accent (not present in imagery; chosen to
                     complement forest-green + warm-gold)
     cream        : neutral warm off-white background
   ============================================================ */

:root{
  --forest-green:#1B5E3A;
  --forest-green-hover:#0F3A1A;
  --warm-gold:#B8935B;
  --warm-gold-hover:#C49560;
  --pro-blue:#1E5A8E;
  --cream:#FBF6EC;
  --gray-900:#111827;
  --gray-700:#374151;
  --gray-600:#4B5563;
  --gray-500:#6B7280;
  --gray-200:#e5e7eb;
  --radius:0.65rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--gray-900);
  background:var(--cream);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Playfair Display',serif;
  margin:0;
  line-height:1.2;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:'Inter',sans-serif;cursor:pointer;}

.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}
@media (min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem;}}
@media (min-width:1024px){.container{padding-left:2rem;padding-right:2rem;max-width:1280px;}}

.bg-cream{background:var(--cream);}
.bg-white{background:#fff;}
.text-forest{color:var(--forest-green);}
.text-gold{color:var(--warm-gold);}
.text-blue{color:var(--pro-blue);}

/* Typography scale matching font-display-lg / font-display-md / font-display / font-heading */
.display-lg{font-size:2.75rem;font-weight:700;}
.display-md{font-size:2.1rem;font-weight:700;}
.display{font-size:1.85rem;font-weight:700;}
.heading{font-size:1.35rem;font-weight:600;font-family:'Inter',sans-serif;}
@media (min-width:768px){
  .display-lg{font-size:3.75rem;}
  .display-md{font-size:2.75rem;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;border-radius:8px;font-size:.9rem;font-weight:600;
  border:2px solid transparent;transition:all .18s ease;white-space:nowrap;
}
.btn-lg{height:48px;padding:0 30px;font-size:.95rem;}
.btn-block{width:100%;}
.btn-forest{background:var(--forest-green);color:var(--cream);}
.btn-forest:hover{background:var(--forest-green-hover);transform:translateY(-2px);}
.btn-gold{background:var(--warm-gold);color:#1a1a1a;}
.btn-gold:hover{background:var(--warm-gold-hover);transform:translateY(-2px);}
.btn-outline-cream{background:transparent;border-color:var(--cream);color:var(--cream);}
.btn-outline-cream:hover{background:rgba(255,255,255,.1);}
.btn-white{background:#fff;color:var(--forest-green);}

/* ---------- Card ---------- */
.card{background:#fff;border-radius:10px;border:1px solid var(--gray-200);box-shadow:0 1px 2px rgba(0,0,0,.05);}
.card-hover:hover{box-shadow:0 12px 24px rgba(0,0,0,.08);}

/* ---------- Animations ---------- */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.animate-fade-in{animation:fadeIn .8s ease-out;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
main section{animation:rise .68s cubic-bezier(.23,1,.32,1) both;}
@keyframes scaleIn{from{opacity:0;transform:scale(.98);}to{opacity:1;transform:scale(1);}}
main img{animation:scaleIn .7s cubic-bezier(.23,1,.32,1) both;}
.group img{transition:transform .42s cubic-bezier(.23,1,.32,1), filter .42s ease;}
.group:hover img{transform:scale(1.045);filter:saturate(1.06);}

/* ============================================================
   Nav
   ============================================================ */
nav.site-nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gray-200);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.logo img{height:48px;width:112px;object-fit:contain;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--gray-700);transition:color .15s;padding-bottom:2px;}
.nav-links a:hover{color:var(--forest-green);}
.nav-links a.active{color:var(--forest-green);border-bottom:2px solid var(--forest-green);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.menu-btn{display:none;background:none;border:none;padding:6px;color:var(--gray-900);}
.menu-btn svg{width:26px;height:26px;}
.mobile-nav{display:none;flex-direction:column;gap:4px;padding:12px 16px 18px;background:#fff;border-top:1px solid var(--gray-200);}
.mobile-nav a{padding:10px 0;font-weight:500;border-bottom:1px solid var(--gray-200);color:var(--gray-700);}
.mobile-nav.open{display:flex;}
@media (max-width:900px){
  .nav-links, .nav-actions .btn{display:none;}
  .menu-btn{display:block;}
}

/* KEBS badge / tooltip */
.kebs-badge{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:rgba(30,90,142,.1);border:1px solid rgba(30,90,142,.3);
  border-radius:8px;cursor:help;text-align:center;
}
.kebs-badge .l1{font-size:.65rem;font-weight:700;color:var(--pro-blue);}
.kebs-badge .l2{font-size:.5rem;color:var(--pro-blue);font-weight:600;}
.kebs-tip{
  position:absolute;top:56px;right:0;background:#1f2937;color:#fff;padding:10px 14px;border-radius:8px;
  font-size:.8rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10;
}
.kebs-tip small{display:block;color:#9ca3af;font-size:.7rem;margin-top:2px;}
.kebs-badge:hover .kebs-tip{opacity:1;}

/* ============================================================
   Hero
   ============================================================ */
.hero-split{background:linear-gradient(135deg,var(--forest-green),var(--forest-green),var(--forest-green-hover));overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:600px;}
.hero-text{padding:48px 32px;}
@media (min-width:768px){.hero-text{padding:64px;}}
.hero-text p.lead{font-size:1.125rem;color:#f3f4f6;margin:16px 0 32px;max-width:28rem;}
.hero-btns{display:flex;flex-wrap:wrap;gap:16px;}
.hero-img-wrap{position:relative;height:100%;min-height:340px;overflow:hidden;}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}.hero-img-wrap{min-height:280px;}}

.hero-inner{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--forest-green),var(--forest-green),var(--forest-green-hover));padding:80px 0;}
@media (min-width:768px){.hero-inner{padding:128px 0;}}
.hero-inner .bg-photo{position:absolute;inset:0;opacity:.1;}
.hero-inner .bg-photo img{width:100%;height:100%;object-fit:cover;}
.hero-inner .container{position:relative;z-index:2;}
.hero-inner h1{color:var(--cream);margin-bottom:24px;}
.hero-inner p{font-size:1.125rem;color:#f3f4f6;max-width:42rem;}

/* ============================================================
   Sections
   ============================================================ */
section{padding:80px 0;}
.section-title{text-align:center;margin-bottom:12px;}
.section-sub{text-align:center;color:var(--gray-600);margin-bottom:48px;}

/* Trust indicators */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
@media (min-width:768px){.trust-grid{grid-template-columns:repeat(4,1fr);}}
.trust-item{text-align:center;}
.trust-item .num{font-size:1.875rem;font-weight:700;color:var(--forest-green);margin-bottom:8px;}
.trust-item p{font-size:.9rem;color:var(--gray-600);}

/* Product grid */
.product-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:48px;}
@media (min-width:768px){.product-grid{grid-template-columns:repeat(3,1fr);}}
.product-item{cursor:pointer;}
.product-img{position:relative;overflow:hidden;border-radius:10px;height:256px;background:#f3f4f6;box-shadow:0 4px 14px rgba(0,0,0,.08);margin-bottom:16px;}
.product-img img{width:100%;height:100%;object-fit:cover;}
.product-overlay{
  position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent);
  opacity:0;transition:opacity .2s;display:flex;align-items:flex-end;padding:16px;
}
.product-item:hover .product-overlay{opacity:1;}
.product-overlay p{color:#fff;font-weight:600;}
.product-item h3{color:var(--forest-green);margin-bottom:4px;}
.product-item .qty{font-size:.875rem;color:var(--gray-600);}

/* services visual grid */
.service-visual-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:768px){.service-visual-grid{grid-template-columns:repeat(3,1fr);}}
.service-visual-icon{
  height:192px;border-radius:10px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;
}
.service-visual-icon svg{width:80px;height:80px;opacity:.35;transition:transform .3s;}
.service-visual-grid .group:hover svg{transform:scale(1.1);}
.service-visual-grid h3{margin-bottom:8px;}
.service-visual-grid p{font-size:.9rem;color:var(--gray-600);}

/* full-bleed image banner */
.img-banner{position:relative;height:384px;overflow:hidden;border-radius:10px;margin:0 16px;}
@media (min-width:768px){.img-banner{margin:0;}}
.img-banner img{width:100%;height:100%;object-fit:cover;}
.img-banner-overlay-l{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent);display:flex;align-items:center;}
.img-banner-overlay-r{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent);display:flex;align-items:flex-end;}
.img-banner-content{padding:32px;color:#fff;max-width:28rem;}
@media (min-width:768px){.img-banner-content{padding:64px;}}
.img-banner-content h3{color:var(--cream);margin-bottom:16px;}
.img-banner-content p{color:#f3f4f6;margin-bottom:24px;}

/* Why choose */
.why-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:768px){.why-grid{grid-template-columns:repeat(3,1fr);}}
.why-item{display:flex;flex-direction:column;align-items:center;text-align:center;}
.why-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.why-icon svg{width:32px;height:32px;}
.why-item h3{margin-bottom:8px;}
.why-item p{font-size:.9rem;color:var(--gray-600);}

/* CTA */
.cta{padding:64px 0;background:var(--forest-green);color:var(--cream);text-align:center;}
.cta h2{color:var(--cream);margin-bottom:16px;}
.cta p{color:rgba(251,246,236,.9);margin-bottom:32px;max-width:42rem;margin-left:auto;margin-right:auto;}

/* ============================================================
   Page-level content grids (About / Services / Contact)
   ============================================================ */
.two-col{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;}
@media (min-width:768px){.two-col{grid-template-columns:1fr 1fr;}}
.two-col p{color:var(--gray-600);margin-bottom:16px;line-height:1.7;}
.two-col img{border-radius:10px;box-shadow:0 20px 25px -5px rgba(0,0,0,.15);}

.pin-badge{
  background:var(--warm-gold);color:#1a1a1a;padding:24px;border-radius:10px;box-shadow:0 10px 15px rgba(0,0,0,.1);
  max-width:16rem;
}
.pin-badge p:first-child{font-weight:600;margin-bottom:8px;}
.pin-badge p:last-child{font-size:.875rem;}
.img-with-badge{position:relative;}
.img-with-badge .pin-badge{position:absolute;bottom:-24px;right:-24px;}
@media (max-width:640px){.img-with-badge .pin-badge{position:static;margin-top:16px;}}

.mv-grid{display:grid;grid-template-columns:1fr;gap:48px;}
@media (min-width:768px){.mv-grid{grid-template-columns:1fr 1fr;}}
.mv-card{padding:32px;border-radius:10px;border:2px solid;background:#fff;}
.mv-card .ico{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.mv-card h3{margin-bottom:16px;}
.mv-card p{color:var(--gray-600);line-height:1.7;}

.values-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:768px){.values-grid{grid-template-columns:1fr 1fr;}}
.value-card{padding:32px;border-radius:10px;border:1px solid var(--gray-200);background:#fff;transition:box-shadow .2s;}
.value-card:hover{box-shadow:0 10px 20px rgba(0,0,0,.08);}
.value-card.span2{grid-column:1/-1;}
.value-card .ico{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.value-card h3{margin-bottom:12px;font-size:1.15rem;}
.value-card p{color:var(--gray-600);}

.sectors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (min-width:768px){.sectors-grid{grid-template-columns:repeat(4,1fr);}}
.sector-card{padding:24px;text-align:center;border-radius:10px;border:1px solid var(--gray-200);background:#fff;transition:box-shadow .2s;}
.sector-card:hover{box-shadow:0 6px 14px rgba(0,0,0,.06);}
.sector-card p{font-weight:600;color:var(--forest-green);}

.highlights-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:768px){.highlights-grid{grid-template-columns:repeat(3,1fr);}}
.highlight-item{text-align:center;}
.highlight-item .num{font-size:3rem;font-weight:700;color:var(--warm-gold);margin-bottom:16px;}
.highlight-item h3{margin-bottom:8px;}
.highlight-item p{color:var(--gray-600);}

/* Services page: feature list rows */
.feat-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px;}
.feat-list li{display:flex;align-items:center;gap:8px;color:var(--gray-600);}
.feat-list li svg{width:16px;height:16px;color:var(--forest-green);flex-shrink:0;}
.feat-list.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.feat-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.feat-row svg{width:20px;height:20px;color:var(--forest-green);flex-shrink:0;margin-top:2px;}
.feat-row p.t{font-weight:600;color:var(--gray-900);}
.feat-row p.d{font-size:.875rem;color:var(--gray-600);}

.compliance-box{background:rgba(27,94,58,.05);padding:16px;border-radius:8px;}
.compliance-box p{font-size:.875rem;font-weight:600;color:var(--forest-green);}

.consult-box{background:linear-gradient(135deg,rgba(27,94,58,.1),rgba(184,147,91,.1));padding:32px;border-radius:10px;border:1px solid rgba(27,94,58,.2);}
.consult-box h3{margin-bottom:24px;}
.consult-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.consult-box .t{font-weight:600;color:var(--gray-900);}
.consult-box .d{font-size:.875rem;color:var(--gray-600);}

/* Contact page */
.contact-cards{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:64px;}
@media (min-width:768px){.contact-cards{grid-template-columns:repeat(4,1fr);}}
.contact-card{padding:32px;text-align:center;border-radius:10px;border:1px solid var(--gray-200);background:#fff;transition:box-shadow .2s;}
.contact-card:hover{box-shadow:0 10px 20px rgba(0,0,0,.08);}
.contact-card .ico{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.contact-card h3{margin-bottom:8px;font-size:1.1rem;}
.contact-card p{font-size:.9rem;color:var(--gray-600);}
.contact-card small{display:block;margin-top:8px;color:var(--gray-500);font-size:.8rem;}

.form-group{margin-bottom:24px;}
.form-group label{display:block;font-size:.875rem;font-weight:500;color:var(--gray-700);margin-bottom:8px;}
.form-group input, .form-group textarea, .form-group select{
  width:100%;padding:10px 14px;border:1px solid var(--gray-200);border-radius:8px;font-size:.95rem;
  font-family:'Inter',sans-serif;background:#fff;color:var(--gray-900);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{outline:2px solid var(--forest-green);outline-offset:1px;}

.why-contact-box{background:#fff;padding:32px;border-radius:10px;border:1px solid var(--gray-200);margin-bottom:32px;}
.why-contact-box h3{margin-bottom:24px;}
.why-contact-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.why-contact-box li{display:flex;align-items:flex-start;gap:12px;}
.why-contact-box .check{color:var(--warm-gold);font-weight:700;font-size:1.1rem;}
.why-contact-box .t{font-weight:600;color:var(--gray-900);}
.why-contact-box .d{font-size:.875rem;color:var(--gray-600);}

.direct-contact-box{background:var(--forest-green);color:var(--cream);padding:32px;border-radius:10px;}
.direct-contact-box h3{margin-bottom:16px;color:var(--cream);}
.direct-contact-box p{color:rgba(251,246,236,.9);margin-bottom:16px;}
.direct-contact-box .small{font-size:.875rem;color:rgba(251,246,236,.8);}

.faq-grid{display:grid;grid-template-columns:1fr;gap:32px;max-width:56rem;margin:0 auto;}
@media (min-width:768px){.faq-grid{grid-template-columns:1fr 1fr;}}
.faq-card{padding:24px;border-radius:10px;border:1px solid var(--gray-200);background:#fff;}
.faq-card h3{font-size:1rem;font-weight:600;margin-bottom:12px;}
.faq-card p{font-size:.9rem;color:var(--gray-600);}

/* ============================================================
   Enquiry Modal
   ============================================================ */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff;border-radius:12px;max-width:42rem;width:100%;max-height:90vh;overflow-y:auto;
  padding:32px;
}
.modal-box h2{color:var(--forest-green);font-size:1.5rem;font-family:'Inter',sans-serif;font-weight:700;margin-bottom:8px;}
.modal-box>p{color:var(--gray-600);font-size:.9rem;margin-bottom:24px;}
.modal-row2{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px;}
@media (min-width:640px){.modal-row2{grid-template-columns:1fr 1fr;}}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px;}
.btn-cancel{background:transparent;border:1px solid var(--gray-200);color:var(--gray-700);}

/* ============================================================
   Footer
   ============================================================ */
footer{background:var(--forest-green);color:var(--cream);padding:48px 0 32px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px;}
@media (min-width:768px){.footer-grid{grid-template-columns:repeat(4,1fr);}}
.footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.footer-brand .mark{width:32px;height:32px;background:var(--warm-gold);border-radius:6px;display:flex;align-items:center;justify-content:center;}
.footer-brand .mark svg{width:20px;height:20px;color:var(--forest-green);}
.footer-brand span{font-family:'Inter',sans-serif;font-weight:600;font-size:1.1rem;}
footer p{color:rgba(251,246,236,.8);font-size:.9rem;}
footer h4{font-size:.95rem;font-weight:600;margin-bottom:16px;}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.9rem;}
.footer-links a{color:rgba(251,246,236,.8);}
.footer-links a:hover{color:var(--cream);}
.footer-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:rgba(251,246,236,.8);}
.footer-bottom{border-top:1px solid rgba(251,246,236,.2);padding-top:32px;text-align:center;font-size:.875rem;color:rgba(251,246,236,.7);}
