/*
 * Electronics Corporate Website — Homepage UI
 * Bootstrap 5.3.8 custom stylesheet
 * Load Bootstrap CSS first, then this file.
 * Hero images can be configured in markup:
 * style="--hero-image: url('/images/hero-electronics.jpg')"
 * style="--tender-image: url('/images/government-building.jpg')"
 */
:root {
  --site-navy:#0b3156; --site-navy-deep:#061b32; --site-blue:#075ca8;
  --site-blue-soft:#eaf3fb; --site-orange:#ff9f00; --site-orange-hover:#ed8e00;
  --site-ink:#12263f; --site-muted:#526276; --site-border:#dce6ef;
  --site-surface:#fff; --site-surface-soft:#f4f8fc;
  --site-shadow-sm:0 3px 12px rgba(9,38,68,.06);
  --site-shadow-md:0 12px 32px rgba(9,38,68,.12);
  --site-radius-sm:8px; --site-radius-md:12px; --site-radius-lg:18px;
  --site-container:1440px; --site-transition:180ms ease;
}
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--site-ink); background:#fff; font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { display:block; max-width:100%; height:auto; }
a { color:var(--site-blue); text-decoration:none; transition:color var(--site-transition); }
a:hover { color:var(--site-navy); }
button,input,select,textarea { font:inherit; }
:focus-visible { outline:3px solid rgba(255,159,0,.72); outline-offset:3px; }
.site-container { width:min(calc(100% - 48px),var(--site-container)); margin-inline:auto; }
.section { padding-block:30px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.section-heading h2,.section-title { margin:0; color:var(--site-navy-deep); font-size:clamp(1.25rem,1.4vw,1.65rem); font-weight:800; letter-spacing:-.035em; line-height:1.2; }
.section-link { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; color:var(--site-blue); font-size:.88rem; font-weight:700; }
.section-link:hover { color:var(--site-orange-hover); }

/* Top contact bar */
.topbar { min-height:34px; color:#fff; background:linear-gradient(90deg,#07345d,#0b426f); font-size:.78rem; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:34px; }
.topbar-group { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.topbar-item { display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.96); white-space:nowrap; }
.topbar-item:hover { color:#ffd28a; }
.topbar-separator { color:rgba(255,255,255,.48); }

/* Header and navigation */
.site-header { position:relative; z-index:1030; background:rgba(255,255,255,.98); border-bottom:1px solid #e6edf4; box-shadow:0 2px 8px rgba(5,31,56,.035); }
.site-navbar { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; }
.site-brand { display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; color:var(--site-navy); }
.site-brand:hover { color:var(--site-blue); }
.site-brand-logo { width:43px; height:43px; object-fit:contain; }
.site-brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.site-brand-name { color:var(--site-navy); font-size:1.35rem; font-weight:850; letter-spacing:-.045em; }
.site-brand-tagline { margin-top:5px; color:#53677b; font-size:.55rem; font-weight:700; letter-spacing:.055em; text-transform:uppercase; }
.site-nav { display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.55vw,27px); margin-inline:auto; }
.site-nav-link { position:relative; display:inline-flex; align-items:center; gap:5px; padding:28px 0 25px; color:#1c2c42; font-size:.88rem; font-weight:650; white-space:nowrap; }
.site-nav-link::after { position:absolute; right:0; bottom:13px; left:0; height:2px; background:var(--site-blue); content:""; transform:scaleX(0); transform-origin:left; transition:transform var(--site-transition); }
.site-nav-link:hover,.site-nav-link.is-active { color:var(--site-blue); }
.site-nav-link:hover::after,.site-nav-link.is-active::after { transform:scaleX(1); }
.site-nav-actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.site-search-button { display:inline-grid; width:42px; height:42px; place-items:center; color:var(--site-navy); background:#fff; border:1px solid var(--site-border); border-radius:50%; transition:all var(--site-transition); }
.site-search-button:hover { color:var(--site-blue); border-color:var(--site-blue); background:var(--site-blue-soft); }
.btn-quote { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:43px; padding:11px 19px; color:#fff; background:linear-gradient(135deg,#ffab0b,#ff9700); border:1px solid transparent; border-radius:10px; box-shadow:0 5px 13px rgba(255,159,0,.17); font-size:.88rem; font-weight:750; white-space:nowrap; transition:transform var(--site-transition),box-shadow var(--site-transition),background var(--site-transition); }
.btn-quote:hover { color:#fff; background:linear-gradient(135deg,#f6a000,#e98600); box-shadow:0 8px 18px rgba(255,159,0,.25); transform:translateY(-1px); }
.site-mobile-toggle { display:none; width:42px; height:42px; place-items:center; color:var(--site-navy); background:#fff; border:1px solid var(--site-border); border-radius:10px; }
.site-nav .dropdown-menu { min-width:220px; padding:8px; border:1px solid var(--site-border); border-radius:12px; box-shadow:var(--site-shadow-md); }
.site-nav .dropdown-item { padding:10px 12px; border-radius:7px; color:var(--site-ink); font-size:.9rem; }
.site-nav .dropdown-item:hover,.site-nav .dropdown-item:focus { color:var(--site-blue); background:var(--site-blue-soft); }

/* Hero banner */
.hero { position:relative; isolation:isolate; overflow:hidden; min-height:296px; color:#fff; background-color:var(--site-navy-deep); background-image:linear-gradient(90deg,rgba(3,20,40,.98) 0%,rgba(4,29,55,.94) 31%,rgba(5,37,67,.65) 49%,rgba(5,37,67,.10) 76%,rgba(5,37,67,.05) 100%),var(--hero-image); background-position:center,center right; background-size:cover; background-repeat:no-repeat; }
.hero::after { position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(3,20,40,.12),transparent 42%); content:""; pointer-events:none; }
.hero-inner { display:flex; align-items:center; min-height:inherit; padding-block:30px 25px; }
.hero-content { width:min(100%,610px); }
.hero-eyebrow { display:inline-block; margin-bottom:8px; color:#f6f9ff; font-size:.82rem; font-weight:750; letter-spacing:.19em; text-transform:uppercase; }
.hero-title { max-width:610px; margin:0 0 9px; color:#fff; font-size:clamp(2rem,3vw,2.8rem); font-weight:850; letter-spacing:-.045em; line-height:1.08; text-wrap:balance; }
.hero-title .text-accent { color:var(--site-orange); }
.hero-description { max-width:560px; margin:0 0 14px; color:rgba(255,255,255,.96); font-size:clamp(.95rem,1.15vw,1.08rem); line-height:1.5; }
.hero-search { display:flex; align-items:stretch; width:min(100%,545px); min-height:42px; padding:4px; background:#fff; border:1px solid rgba(255,255,255,.8); border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.hero-search .form-control { min-width:0; padding:8px 12px; color:var(--site-ink); background:transparent; border:0; box-shadow:none; font-size:.87rem; }
.hero-search .form-control::placeholder { color:#6b7788; opacity:1; }
.hero-search .input-icon { display:inline-flex; align-items:center; padding-left:10px; color:#66778a; }
.hero-search .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:98px; padding-inline:14px; color:#fff; background:var(--site-orange); border:0; border-radius:7px; font-size:.86rem; font-weight:750; }
.hero-search .btn:hover { background:var(--site-orange-hover); }
.hero-popular { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:10px; color:#fff; font-size:.79rem; }
.hero-popular-label { margin-right:3px; font-weight:750; }
.hero-popular a { display:inline-flex; align-items:center; min-height:25px; padding:4px 11px; color:#fff; background:rgba(221,237,252,.15); border:1px solid rgba(255,255,255,.08); border-radius:999px; font-size:.73rem; transition:background var(--site-transition); }
.hero-popular a:hover { color:#fff; background:rgba(255,159,0,.92); }

/* Trust / value strip */
.trust-strip { background:linear-gradient(90deg,#eef5fb,#f8fbfe,#eef5fb); border-bottom:1px solid #e3edf6; }
.trust-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; padding-block:15px; }
.trust-item { display:flex; align-items:center; gap:13px; min-width:0; padding:0 18px; border-right:1px solid #c7d5e3; }
.trust-item:first-child { padding-left:10px; }
.trust-item:last-child { padding-right:0; border-right:0; }
.trust-icon { display:inline-grid; flex:0 0 34px; width:34px; height:34px; place-items:center; color:var(--site-blue); font-size:1.55rem; }
.trust-copy { min-width:0; }
.trust-title { display:block; margin-bottom:1px; color:var(--site-navy-deep); font-size:.82rem; font-weight:800; line-height:1.3; }
.trust-description { display:block; color:#35475b; font-size:.74rem; line-height:1.35; }

/* Category cards */
.category-section { padding-top:20px; padding-bottom:18px; }
.category-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; }
.category-card { display:flex; flex-direction:column; align-items:center; min-width:0; min-height:134px; padding:10px 9px 9px; color:var(--site-ink); background:linear-gradient(180deg,#f8fbfe,#eff5fa); border:1px solid #e1eaf2; border-radius:var(--site-radius-sm); text-align:center; transition:transform var(--site-transition),border-color var(--site-transition),box-shadow var(--site-transition); }
.category-card:hover { color:var(--site-blue); border-color:#b6d2eb; box-shadow:var(--site-shadow-sm); transform:translateY(-3px); }
.category-card-image { display:grid; width:100%; height:75px; margin-bottom:5px; place-items:center; }
.category-card-image img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.category-card-title { display:block; width:100%; margin-top:auto; color:#13243a; font-size:.72rem; font-weight:800; line-height:1.3; overflow-wrap:anywhere; }
.category-card-link { display:inline-flex; align-items:center; gap:5px; margin-top:5px; color:var(--site-blue); font-size:.7rem; font-weight:700; }

/* Featured product cards */
.featured-section { padding-top:0; padding-bottom:18px; }
.product-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; }
.product-card { display:flex; flex-direction:column; min-width:0; padding:8px; background:#fff; border:1px solid var(--site-border); border-radius:var(--site-radius-sm); transition:transform var(--site-transition),box-shadow var(--site-transition),border-color var(--site-transition); }
.product-card:hover { border-color:#b8d1e8; box-shadow:var(--site-shadow-sm); transform:translateY(-3px); }
.product-card-image { display:grid; height:82px; margin-bottom:6px; place-items:center; overflow:hidden; background:#fff; border-radius:5px; }
.product-card-image img { width:100%; height:100%; object-fit:contain; }
.product-card-title { display:-webkit-box; min-height:2.5em; margin:0; overflow:hidden; color:var(--site-navy-deep); font-size:.73rem; font-weight:800; line-height:1.25; text-align:center; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.product-card-brand { margin-top:2px; color:var(--site-muted); font-size:.68rem; line-height:1.3; text-align:center; }
.btn-product-quote { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:29px; margin-top:8px; padding:5px 6px; color:var(--site-blue); background:#fff; border:1px solid #8dbce6; border-radius:6px; font-size:.69rem; font-weight:750; line-height:1.2; transition:color var(--site-transition),background var(--site-transition),border-color var(--site-transition); }
.btn-product-quote:hover { color:#fff; background:var(--site-blue); border-color:var(--site-blue); }

/* About, tender and credentials panels */
.business-panels { display:grid; grid-template-columns:1.28fr 1.05fr 1.1fr; gap:12px; padding-top:0; padding-bottom:24px; }
.business-panel { min-width:0; overflow:hidden; background:#f1f6fb; border:1px solid #e0eaf3; border-radius:var(--site-radius-md); }
.about-panel { display:grid; grid-template-columns:40% 1fr; }
.about-panel-image { min-height:158px; height:100%; object-fit:cover; }
.business-panel-content { padding:16px; }
.business-panel h3 { margin:0 0 7px; color:var(--site-navy); font-size:1rem; font-weight:850; letter-spacing:-.025em; line-height:1.25; }
.business-panel p { margin:0 0 12px; color:#35465a; font-size:.77rem; line-height:1.5; }
.btn-panel { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:6px 12px; color:#fff; background:var(--site-blue); border:1px solid var(--site-blue); border-radius:6px; font-size:.75rem; font-weight:750; }
.btn-panel:hover { color:#fff; background:var(--site-navy); border-color:var(--site-navy); }
.tender-panel { position:relative; isolation:isolate; min-height:158px; color:#fff; background-color:var(--site-navy); background-image:linear-gradient(90deg,rgba(3,22,43,.97),rgba(3,22,43,.82) 52%,rgba(3,22,43,.16)),var(--tender-image); background-position:center,center; background-size:cover; }
.tender-panel h3 { max-width:260px; color:#fff; font-size:1.02rem; }
.tender-panel p { max-width:285px; color:rgba(255,255,255,.94); }
.tender-panel .btn-panel { color:#fff; background:transparent; border-color:rgba(255,255,255,.7); }
.tender-panel .btn-panel:hover { color:var(--site-navy); background:#fff; }
.credentials-panel { padding:15px; }
.credentials-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.credential-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:94px; padding:9px 6px; color:var(--site-navy); background:#fff; border:1px solid #edf2f7; border-radius:8px; text-align:center; }
.credential-item .bi { color:var(--site-blue); font-size:1.45rem; }
.credential-item span { color:#243950; font-size:.69rem; font-weight:700; line-height:1.3; }

/* Forms and reusable elements */
.site-card { background:#fff; border:1px solid var(--site-border); border-radius:var(--site-radius-md); box-shadow:var(--site-shadow-sm); }
.site-form-label { margin-bottom:6px; color:var(--site-navy); font-size:.88rem; font-weight:750; }
.site-form-control { min-height:44px; border:1px solid #cbd8e5; border-radius:8px; }
.site-form-control:focus { border-color:#73a9da; box-shadow:0 0 0 .22rem rgba(7,92,168,.13); }
.site-alert { padding:12px 15px; border:1px solid var(--site-border); border-radius:9px; }
.site-empty-state { padding:36px 20px; color:var(--site-muted); background:var(--site-surface-soft); border:1px dashed #cbd9e7; border-radius:var(--site-radius-md); text-align:center; }

/* Footer */
.site-footer { color:#dce8f5; background:#071f39; }
.site-footer-main { padding-block:38px 28px; }
.site-footer h2,.site-footer h3,.site-footer h4 { margin:0 0 13px; color:#fff; font-size:.98rem; font-weight:800; }
.site-footer p { color:#c1d0e0; font-size:.86rem; }
.site-footer a { color:#cbd9e8; font-size:.84rem; }
.site-footer a:hover { color:#ffb331; }
.site-footer-links { display:grid; gap:8px; padding:0; margin:0; list-style:none; }
.site-footer-bottom { padding-block:13px; background:#04162a; border-top:1px solid rgba(255,255,255,.1); color:#b7c8da; font-size:.77rem; }
.site-footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Bootstrap refinements */
.btn,.form-control,.form-select,.dropdown-menu,.modal-content { --bs-border-radius:8px; }
.form-control:focus,.form-select:focus { border-color:#73a9da; box-shadow:0 0 0 .22rem rgba(7,92,168,.13); }
.pagination { gap:5px; }
.pagination .page-link { color:var(--site-blue); border-color:var(--site-border); border-radius:7px; }
.pagination .active>.page-link { color:#fff; background:var(--site-blue); border-color:var(--site-blue); }

/* Responsive layout refinements */
@media (min-width:1600px) {
  :root { --site-container:1500px; }
  .hero { min-height:320px; }
  .category-card { min-height:145px; }
  .category-card-image { height:82px; }
  .product-card-image { height:90px; }
}
@media (max-width:1399.98px) {
  .site-nav { gap:13px; }
  .site-nav-link { font-size:.82rem; }
  .site-brand-name { font-size:1.18rem; }
  .site-brand-tagline { font-size:.5rem; }
  .trust-item { gap:9px; padding-inline:12px; }
  .category-grid,.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .category-card { min-height:148px; }
  .category-card-image { height:88px; }
  .product-card-image { height:105px; }
  .business-panels { grid-template-columns:1fr 1fr; }
  .credentials-panel { grid-column:1/-1; }
}
@media (max-width:1199.98px) {
  .site-navbar { gap:15px; }
  .site-nav { gap:10px; }
  .site-nav-link { font-size:.77rem; }
  .site-brand-logo { width:38px; height:38px; }
  .site-brand-name { font-size:1.05rem; }
  .btn-quote { padding-inline:13px; font-size:.81rem; }
  .trust-grid { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:15px; }
  .trust-item:nth-child(3) { border-right:0; }
  .trust-item:nth-child(4) { padding-left:10px; }
}
@media (max-width:991.98px) {
  .site-container { width:min(calc(100% - 32px),var(--site-container)); }
  .topbar-inner { justify-content:center; }
  .topbar-group-secondary { display:none; }
  .site-navbar { min-height:68px; }
  .site-mobile-toggle { display:inline-grid; }
  .site-nav { display:none; }
  .site-nav-actions { margin-left:auto; }
  .hero { min-height:330px; background-image:linear-gradient(90deg,rgba(3,20,40,.97),rgba(4,29,55,.82) 68%,rgba(5,37,67,.48)),var(--hero-image); }
  .hero-content { width:min(100%,620px); }
  .hero-title { font-size:clamp(2rem,5vw,2.8rem); }
  .trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-item,.trust-item:nth-child(3) { padding:8px 12px; border-right:1px solid #c7d5e3; }
  .trust-item:nth-child(even),.trust-item:last-child { border-right:0; }
  .category-grid,.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .business-panels { grid-template-columns:1fr; }
  .credentials-panel { grid-column:auto; }
  .about-panel { grid-template-columns:34% 1fr; }
}
@media (max-width:767.98px) {
  .section { padding-block:24px; }
  .topbar { font-size:.72rem; }
  .topbar-group { gap:11px; }
  .site-brand-logo { width:36px; height:36px; }
  .site-brand-name { font-size:1rem; }
  .site-brand-tagline { max-width:175px; font-size:.47rem; }
  .site-search-button { width:39px; height:39px; }
  .site-nav-actions .btn-quote { display:none; }
  .hero { min-height:360px; background-position:center,62% center; }
  .hero-inner { padding-block:30px; }
  .hero-eyebrow { font-size:.72rem; letter-spacing:.14em; }
  .hero-title { font-size:clamp(1.85rem,7vw,2.5rem); }
  .hero-description { font-size:.92rem; }
  .hero-search { width:100%; }
  .hero-search .btn { min-width:44px; padding-inline:12px; }
  .hero-search .btn .button-label { display:none; }
  .trust-grid { padding-block:10px; row-gap:6px; }
  .trust-item,.trust-item:nth-child(3) { padding:8px 5px; gap:8px; }
  .trust-icon { flex-basis:27px; width:27px; height:27px; font-size:1.2rem; }
  .trust-title { font-size:.74rem; }
  .trust-description { font-size:.68rem; }
  .section-heading { align-items:flex-start; }
  .section-heading h2,.section-title { font-size:1.28rem; }
  .section-link { font-size:.77rem; }
  .category-grid,.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .category-card { min-height:145px; }
  .category-card-image { height:85px; }
  .category-card-title { font-size:.78rem; }
  .category-card-link { font-size:.73rem; }
  .product-card { padding:10px; }
  .product-card-image { height:115px; }
  .product-card-title { font-size:.79rem; }
  .product-card-brand { font-size:.73rem; }
  .btn-product-quote { min-height:34px; font-size:.74rem; }
  .about-panel { grid-template-columns:1fr; }
  .about-panel-image { width:100%; max-height:210px; min-height:0; aspect-ratio:16/7; }
  .business-panel-content { padding:16px; }
  .credentials-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer-bottom-inner { align-items:flex-start; flex-direction:column; gap:6px; }
}
@media (max-width:420px) {
  .site-container { width:calc(100% - 24px); }
  .topbar-group { gap:8px; }
  .topbar-item { font-size:.68rem; }
  .site-brand { gap:7px; }
  .site-brand-name { font-size:.9rem; }
  .site-brand-tagline { max-width:145px; font-size:.42rem; }
  .site-nav-actions { gap:7px; }
  .hero-title { font-size:1.8rem; }
  .hero-popular { gap:5px; }
  .hero-popular a { padding-inline:8px; font-size:.68rem; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-item,.trust-item:nth-child(3),.trust-item:nth-child(even) { padding:7px 3px; border-right:0; border-bottom:1px solid #d7e2ed; }
  .trust-item:last-child { border-bottom:0; }
  .section-heading { flex-wrap:wrap; gap:8px; }
  .category-grid,.product-grid { gap:8px; }
  .category-card { min-height:136px; padding-inline:7px; }
  .category-card-image { height:75px; }
  .product-card-image { height:95px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}