/* =========================================================
   TOKENS
========================================================= */
:root{
  --blue-dark:  #0D47A1;
  --blue:       #1565C0;
  --blue-soft:  #E3F0FC;
  --green:      #2E7D32;
  --green-soft: #E4F5E8;
  --yellow:     #FDD835;
  --yellow-dark:#F9A825;
  --white:      #FFFFFF;
  --bg:         #F6FAF8;
  --text:       #142433;
  --text-muted: #5A6B78;
  --radius:     14px;
  --shadow:     0 8px 24px rgba(13,71,161,.12);
  --header-h:   64px;
  --quick-h:    152px;
  --font-head:  'Poppins', sans-serif;
  --font-body:  'Inter', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + var(--quick-h) + 12px); }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:var(--font-head); margin:0 0 .4em; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   HEADER — sticky logo + nav + category bar
========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(135deg, var(--blue-dark), var(--blue));
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.header-top{
  height:var(--header-h);
  max-width:1400px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.header-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.25rem;
  color:var(--white);
  flex-shrink:0;
}
.logo-mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--yellow);
  color:var(--blue-dark);
  font-weight:800;
  font-size:.95rem;
}
.logo-text em{ color:var(--yellow); font-style:normal; }

/* Desktop nav */
.main-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-link{
  color:var(--white);
  padding:9px 16px;
  border-radius:8px;
  font-weight:500;
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
}
.nav-link:hover,
.nav-link.active{
  background:var(--yellow);
  color:var(--blue-dark);
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  background:transparent;
  border:none;
  border-radius:8px;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  height:3px;
  width:24px;
  margin:0 auto;
  background:var(--white);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Category dropdown — sits next to the logo */
.category-dropdown{
  position:relative;
  flex-shrink:0;
}
.cat-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:8px;
  border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
  color:var(--white);
  font-size:.88rem;
  font-weight:500;
  white-space:nowrap;
  transition:background .2s ease, border-color .2s ease;
}
.cat-dropdown-toggle i{ font-size:.75rem; transition:transform .2s ease; }
.cat-dropdown-toggle:hover{ background:rgba(255,255,255,.16); }
.category-dropdown.open .cat-dropdown-toggle{
  background:var(--yellow);
  color:var(--blue-dark);
  border-color:var(--yellow);
}
.category-dropdown.open .cat-dropdown-toggle i{ transform:rotate(180deg); }

.cat-dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:200px;
  max-width:calc(100vw - 40px);
  background:var(--white);
  border-radius:10px;
  box-shadow:0 14px 32px rgba(13,71,161,.22);
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:200;
  max-height:70vh;
  overflow-y:auto;
}
.category-dropdown.open .cat-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.cat-dropdown-menu li + li{ margin-top:2px; }
.cat-item{
  display:block;
  width:100%;
  text-align:left;
  padding:9px 12px;
  border-radius:7px;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:.9rem;
  font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.cat-item:hover{ background:var(--blue-soft); }
.cat-item.active{ background:var(--green); color:var(--white); }

/* =========================================================
   HEADER SEARCH — filters the company list below by name
========================================================= */
.header-search{
  position:relative;
  display:flex;
  align-items:center;
}
.search-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:8px;
  border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
  color:var(--white);
  flex-shrink:0;
}
.search-toggle:hover{ background:rgba(255,255,255,.16); }

.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:20px;
  padding:8px 14px;
}
.search-icon{ color:rgba(255,255,255,.8); font-size:.85rem; flex-shrink:0; }
.search-box input{
  background:transparent;
  border:none;
  outline:none;
  color:var(--white);
  font-size:.85rem;
  width:170px;
  min-width:0;
}
.search-box input::placeholder{ color:rgba(255,255,255,.65); }
.search-clear{
  color:var(--white);
  opacity:.75;
  font-size:.8rem;
  flex-shrink:0;
}
.search-clear:hover{ opacity:1; }

/* On narrower screens, collapse to a search icon that opens a
   dropdown search box below the header, like the category menu */
@media (max-width:900px){
  .search-toggle{ display:flex; }
  .search-box{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    min-width:240px;
    background:var(--blue-dark);
    border-radius:10px;
    box-shadow:0 14px 32px rgba(13,71,161,.22);
    display:none;
    z-index:200;
  }
  .header-search.open .search-box{ display:flex; }
  .search-box input{ width:100%; }
}
@media (max-width:480px){
  .search-box{ left:-40px; right:-16px; }
}

/* =========================================================
   MOBILE NAV BEHAVIOUR
========================================================= */
@media (max-width: 767px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    z-index:150;
    flex-direction:column;
    align-items:stretch;
    background:var(--blue-dark);
    padding:8px 16px 14px;
    gap:2px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .3s ease, opacity .25s ease;
  }
  .main-nav.open{
    max-height:260px;
    opacity:1;
  }
  .nav-link{ padding:12px 14px; }
}

/* =========================================================
   QUICK CONTACT ROW — 4 cards (one per branch), sticky with the
   navbar. Each reveals its OWN 6 links on hover.
========================================================= */
.quick-row{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:16px;
  padding:14px 12px;
  background:var(--white);
}
.quick-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.quick-thumb{
  position:relative;
  width:100px;
  height:100px;
  border-radius:var(--radius);
  overflow:hidden;
  display:grid;
  place-items:center;
  font-size:2rem;
  color:var(--white);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.quick-card:hover .quick-thumb,
.quick-card:focus-within .quick-thumb{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(20,36,51,.22);
}
.thumb-1{ background:linear-gradient(160deg,var(--blue),var(--blue-dark)); }
.thumb-2{ background:linear-gradient(160deg,var(--green),#1B5E20); }
.thumb-3{ background:linear-gradient(160deg,var(--yellow-dark),#E65100); }
.thumb-4{ background:linear-gradient(160deg,var(--blue),var(--green)); }

.quick-overlay{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  place-items:center;
  gap:2px;
  background:rgba(10,20,30,.85);
  opacity:0;
  transform:scale(.9);
  transition:opacity .22s ease, transform .22s ease;
}
.quick-card:hover .quick-overlay,
.quick-card:focus-within .quick-overlay{
  opacity:1;
  transform:scale(1);
}
.quick-label{
  font-size:.7rem;
  font-weight:600;
  color:var(--blue-dark);
  text-align:center;
  margin:0;
}
.qicon{
  color:var(--white);
  font-size:1rem;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  transition:color .2s ease, background .2s ease;
}
.qicon.wa:hover{ background:#25D366; }
.qicon.ig:hover{ background:#C13584; }
.qicon.fb:hover{ background:#1877F2; }
.qicon.yt:hover{ background:#FF0000; }
.qicon.gm:hover{ background:var(--green); }
.qicon.web:hover{ background:var(--blue); }
.qicon.ph:hover{ background:var(--yellow-dark); }

/* =========================================================
   PRODUCT SHOWCASE
========================================================= */
.products-section{
  max-width:1400px;
  margin:0 auto;
  padding:28px 32px 40px;
}
.section-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.section-heading h1{ font-size:1.5rem; color:var(--blue-dark); }
.cat-count{ margin:0; color:var(--text-muted); font-size:.9rem; }

/* Logo cards scale to fill their grid column — column COUNT changes
   at each breakpoint (2 / 3 / 6 / 10), so card size adjusts to fit. */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* mobile: 2 per row */
  gap:16px;
}

.product-card.hidden{ display:none; }

/* Category thumbnail colours — add a new thumb-* rule here for each
   new category you introduce in the HTML */
.thumb-electronics{ background:linear-gradient(160deg,#1565C0,#0D47A1); }
.thumb-fashion{     background:linear-gradient(160deg,#2E7D32,#1B5E20); }
.thumb-home{        background:linear-gradient(160deg,#F9A825,#E65100); }
.thumb-toys{        background:linear-gradient(160deg,#1565C0,#2E7D32); }
.thumb-groceries{   background:linear-gradient(160deg,#2E7D32,#1565C0); }

.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
}
.product-thumb{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  display:grid;
  place-items:center;
  font-size:clamp(1.2rem, 5vw, 2rem);
  color:var(--white);
  box-shadow:0 4px 14px rgba(20,36,51,.14);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover .product-thumb{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(20,36,51,.2);
}

/* Social-link overlay shown when hovering a company logo */
.product-overlay{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  place-items:center;
  gap:1px;
  background:rgba(10,20,30,.85);
  opacity:0;
  transform:scale(.94);
  transition:opacity .2s ease, transform .2s ease;
}
.product-card:hover .product-overlay,
.product-card:focus-within .product-overlay{
  opacity:1;
  transform:scale(1);
}
.product-overlay .qicon{ font-size:clamp(.6rem, 2.5vw, .95rem); }

.product-name{
  font-size:.75rem;
  font-weight:600;
  text-align:center;
  line-height:1.25;
  margin:0;
}

/* Loader */
.loader-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:26px 0;
  color:var(--text-muted);
  font-size:.9rem;
}
.spinner{
  width:20px; height:20px;
  border:3px solid var(--blue-soft);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.end-msg{ text-align:center; color:var(--text-muted); padding:20px 0; }

/* =========================================================
   FLOATING LOGOS
========================================================= */
.floating-logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  padding:10px 20px 44px;
  max-width:1400px;
  margin:0 auto;
}
.flogo{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--white);
  padding:14px 22px;
  border-radius:50px;
  box-shadow:0 10px 24px rgba(13,71,161,.14);
  font-weight:600;
  font-size:.88rem;
  color:var(--blue-dark);
}
.flogo i{ color:var(--yellow-dark); font-size:1.1rem; }

/* =========================================================
   JOBS PAGE — listings shown one by one (stacked, not a grid)
========================================================= */
.jobs-section{
  max-width:900px;
  margin:0 auto;
  padding:28px 20px 50px;
}
.job-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.job-card{
  display:flex;
  gap:16px;
  background:var(--white);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 4px 16px rgba(20,36,51,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.job-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,36,51,.16);
}
.job-image{
  flex-shrink:0;
  width:90px;
  height:90px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:1.8rem;
  color:var(--white);
}
.job-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.job-title{ font-size:1.05rem; color:var(--blue-dark); margin:0; }
.job-meta{
  font-size:.82rem;
  color:var(--text-muted);
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.job-desc{ font-size:.88rem; color:var(--text); margin:2px 0 6px; }
.job-apply{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  background:#25D366;
  color:var(--white);
  font-weight:600;
  font-size:.85rem;
  padding:9px 16px;
  border-radius:24px;
  transition:background .2s ease, transform .2s ease;
}
.job-apply:hover{ background:#1DA851; transform:translateY(-1px); }
.job-apply i{ font-size:1rem; }

@media (max-width:560px){
  .job-card{ flex-direction:column; align-items:flex-start; }
  .job-image{ width:70px; height:70px; font-size:1.4rem; }
}

/* =========================================================
   NEWS PAGE — plain placeholder body, styled once content is added
========================================================= */
.news-section{
  max-width:1400px;
  margin:0 auto;
  padding:28px 20px 50px;
  min-height:40vh;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  text-align:center;
  padding:20px;
  background:var(--blue-dark);
  color:var(--white);
  font-size:.85rem;
}
.footer-weather{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.15);
  font-size:.85rem;
  color:var(--yellow);
  flex-wrap:wrap;
}
.footer-weather i{ font-size:1rem; }

/* =========================================================
   RESPONSIVE BREAKPOINTS
   Small device (2 per row) -> Tablet (3) -> Desktop/PC (6) ->
   TV / big monitors (10)
========================================================= */

/* Tablet */
@media (min-width:600px){
  .product-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* Desktop / PC (laptop and up) */
@media (min-width:1024px){
  .product-grid{ grid-template-columns:repeat(6, 1fr); }
  .section-heading h1{ font-size:1.8rem; }
}

/* Large desktop */
@media (min-width:1600px){
  .products-section{ padding:36px 40px 56px; max-width:1500px; }
}

/* Smart TV / very large monitors */
@media (min-width:2200px){
  html{ font-size:20px; }
  .product-grid{ grid-template-columns:repeat(10, 1fr); gap:20px; }
  .header-top, .products-section, .floating-logos{ max-width:1800px; }
  .quick-thumb{ width:130px; height:130px; }
}

/* Small phones — keep the 4 quick-contact icons on one row but
   shrink them */
@media (max-width:480px){
  .logo-text{ display:none; }
  .cat-dropdown-toggle{ padding:8px 10px; font-size:.78rem; }
  .cat-dropdown-toggle span{ max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:420px){
  .quick-thumb{ width:70px; height:70px; border-radius:10px; font-size:1.4rem; }
  .quick-overlay .qicon{ font-size:.7rem; }
  .quick-label{ font-size:.6rem; }
  .flogo{ padding:10px 16px; font-size:.8rem; }
  .products-section{ padding:20px 14px 30px; }
}