/* EggIncubator.co.za shared header, menu, footer and floating buttons.
   Used on every page. Change colours or layout here once for the whole site. */
.ei-skip{position:absolute;left:0;top:-48px;background:#cc0000;color:#fff;padding:10px 14px;z-index:300;text-decoration:none;font:600 15px/1 system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.ei-skip:focus{top:0}
.ei-top,.ei-nav,.ei-foot,.ei-float,.ei-trust{font-family:system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;line-height:1.5;box-sizing:border-box}
.ei-top *,.ei-nav *,.ei-foot *,.ei-float *,.ei-trust *{box-sizing:border-box}
.ei-wrap{max-width:1280px;margin:0 auto;padding:0 1.25rem}
.ei-top{background:#1e3a1c;color:#e8efe4;font-size:14px;padding:8px 0}
.ei-top .ei-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px}
.ei-top a{color:#ffd966;text-decoration:none}
.ei-top a:hover{text-decoration:underline}
.ei-nav{background:#fff;box-shadow:0 1px 4px rgba(30,58,28,.12);position:sticky;top:0;z-index:200}
.ei-nav .ei-wrap{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.ei-brand{font-weight:800;font-size:21px;color:#1e3a1c;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;line-height:1.15}
.ei-brand span{color:#cc0000}
.ei-brand small{display:block;font-size:11px;font-weight:600;color:#5b6b58;letter-spacing:.02em}
.ei-links{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:center;margin-left:auto;font-size:15px;font-weight:600}
.ei-links a{color:#24452a;text-decoration:none;padding:8px 0;white-space:nowrap}
.ei-links a:hover,.ei-links a[aria-current="page"]{color:#cc0000}
.ei-links .ei-cta{background:#2c5a2a;color:#fff;padding:9px 16px;border-radius:40px}
.ei-links .ei-cta:hover,.ei-links .ei-cta[aria-current="page"]{background:#1e3a1c;color:#fff}
@media (max-width:900px){
  .ei-nav .ei-wrap{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:4px}
  .ei-links{margin-left:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:18px;padding-bottom:4px;scrollbar-width:thin}
}
@media (max-width:700px){.ei-top span:last-child{display:none}}
.ei-trust{background:#fff;border-radius:22px;box-shadow:0 8px 22px -6px rgba(0,0,0,.08);padding:1.5rem;margin:2rem auto;max-width:1240px}
.ei-trust h2{margin:0 0 1rem;color:#1e3a1c;font-size:1.35rem;text-align:center;border:0;padding:0}
.ei-trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ei-trust li{background:#eef3e6;border-radius:16px;padding:14px 16px;color:#1f2a1d;font-size:15px;margin:0}
.ei-trust li strong{display:block;color:#1e3a1c;font-size:16px;margin-bottom:2px}
.ei-foot{background:#1e3a1c;color:#e8efe4;font-size:15px;padding:40px 0 24px;margin-top:40px}
.ei-foot a{color:#ffd966;text-decoration:none}
.ei-foot a:hover{text-decoration:underline}
.ei-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.ei-foot h2{color:#fff;font-size:16px;margin:0 0 8px;border:0;padding:0}
.ei-foot p{margin:0 0 6px}
.ei-foot ul{list-style:none;margin:0;padding:0}
.ei-foot li{margin:0 0 6px;padding:0;background:none}
.ei-foot-copy{border-top:1px solid #3a6a38;margin-top:28px;padding-top:16px;text-align:center;color:#c9d6c4;font-size:13px}
.ei-float{position:fixed;right:16px;bottom:16px;z-index:250;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ei-float a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:40px;color:#fff;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.ei-float .ei-contact{background:#1e3a1c}
.ei-float .ei-contact:hover{background:#2c5a2a}
.ei-float .ei-wa{background:#1d7a44}
.ei-float .ei-wa:hover{background:#155c33}
.ei-float .ei-call{background:#cc0000;display:none}
.ei-float svg{width:20px;height:20px;flex:none}
@media (max-width:700px){.ei-float .ei-call{display:inline-flex}.ei-foot{padding-bottom:190px}}
@media print{.ei-nav,.ei-float,.ei-top{display:none}}
/* keep old page content inside the screen on phones */
img,video,iframe{max-width:100%}
img{height:auto}
table{max-width:100%}
/* pages that still load the old global.css (it adds 1rem body padding) */
body.ei-gc{padding:0}
.ei-gc-wrap{padding:1rem}
/* old table layouts: stack the cells on phones */
@media (max-width:700px){
  .ei-stack table,.ei-stack tbody,.ei-stack tr,.ei-stack td,.ei-stack th{display:block;width:auto!important;max-width:100%;height:auto!important}
  .ei-stack img{max-width:100%;height:auto}
}
.ei-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
