/* =========================================================
   RLJS COMPUTING SOLUTIONS — brand overrides on the
   Cepair template (HTML Codex). Re-points Bootstrap's
   --bs-primary / --bs-secondary to RLJS's own orange +
   navy so every existing template component (buttons,
   badges, backgrounds, text-primary, etc.) picks up the
   correct brand colour automatically.
   ========================================================= */

:root{
  --bs-primary: #FE6F05;
  --bs-secondary: #002D4F;
  --rljs-orange: #FE6F05;
  --rljs-orange-soft: #FF8B2E;
  --rljs-navy: #002D4F;
}

body{ font-family: "Open Sans", sans-serif; }

/* Headline font to match the geometric weight of the new logo wordmark */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,
.navbar-brand, .section-title, .btn{
  font-family: "Poppins", "Open Sans", sans-serif;
}

/* Recolour the few hard-coded hex references style.css/bootstrap left behind */
a{ color:var(--rljs-orange); }
a:hover{ color:#c94e00; }

.navbar-brand img{ height:56px; width:auto; display:block; }
.navbar-brand{ background:#fff !important; }

/* =========================================================
   COLOUR FIX: the compiled bootstrap.min.css bakes the old
   template colours (#FFAA19 orange / #042C71 blue) directly
   into these utility classes as literal hex values rather
   than var(--bs-primary)/var(--bs-secondary). That's why the
   navbar/footer/buttons were still showing an off-brand blue
   instead of the logo's navy. Overriding them here, after
   bootstrap.min.css in the cascade, makes every instance of
   these classes site-wide use the exact logo colours.
   ========================================================= */
.bg-primary{ background-color:var(--rljs-orange) !important; }
.text-primary{ color:var(--rljs-orange) !important; }
.border-primary{ border-color:var(--rljs-orange) !important; }
.link-primary{ color:var(--rljs-orange) !important; }

.btn-primary{ background-color:var(--rljs-orange) !important; border-color:var(--rljs-orange) !important; color:#fff !important; }
.btn-primary:hover, .btn-primary:focus{ background-color:#d95c00 !important; border-color:#d95c00 !important; color:#fff !important; }
.btn-outline-primary{ color:var(--rljs-orange) !important; border-color:var(--rljs-orange) !important; }
.btn-outline-primary:hover{ background-color:var(--rljs-orange) !important; border-color:var(--rljs-orange) !important; color:#fff !important; }

.bg-secondary{ background:linear-gradient(135deg, #011F38 0%, var(--rljs-navy) 55%, #013A63 100%) !important; }
.text-secondary{ color:var(--rljs-navy) !important; }
.border-secondary{ border-color:var(--rljs-navy) !important; }
.link-secondary{ color:var(--rljs-navy) !important; }

.btn-secondary{ background-color:var(--rljs-navy) !important; border-color:var(--rljs-navy) !important; color:#fff !important; }
.btn-secondary:hover, .btn-secondary:focus{ background-color:#001c30 !important; border-color:#001c30 !important; color:#fff !important; }
.btn-outline-secondary{ color:var(--rljs-navy) !important; border-color:var(--rljs-navy) !important; }
.btn-outline-secondary:hover{ background-color:var(--rljs-navy) !important; border-color:var(--rljs-navy) !important; color:#fff !important; }

.form-control:focus, .form-select:focus{ border-color:var(--rljs-orange) !important; box-shadow:0 0 0 .25rem rgba(254,111,5,.25) !important; }
.form-check-input:checked{ background-color:var(--rljs-orange) !important; border-color:var(--rljs-orange) !important; }

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:120;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 26px rgba(0,0,0,0.3); color:#fff; }
.whatsapp-float svg{ width:30px; height:30px; }

/* Topbar WhatsApp chip */
.topbar-whatsapp{
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; font-size:14px;
}
.topbar-whatsapp svg{ width:16px; height:16px; fill:#25D366; }
.topbar-whatsapp:hover{ color: var(--rljs-orange); }

/* WhatsApp inline CTA button (used in service band / contact) */
.btn-whatsapp{
  background:#25D366; color:#fff; border-color:#25D366;
}
.btn-whatsapp:hover{ background:#1ebc59; border-color:#1ebc59; color:#fff; }

/* Service item polish (kept from template, just tightened) */
.service-item{ background:#fff; box-shadow:0 2px 14px rgba(0,32,80,0.06); transition:transform .2s ease, box-shadow .2s ease; }
.service-item:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,32,80,0.12); }

/* Testimonial cards (new section, matches template card language) */
.testimonial-item{
  background:#fff; border-radius:6px; padding:28px;
  box-shadow:0 2px 14px rgba(0,32,80,0.06); height:100%;
}
.testimonial-item .stars{ color:var(--rljs-orange); letter-spacing:2px; margin-bottom:10px; display:block; }
.testimonial-item .quote-name{ font-weight:700; color:var(--bs-secondary); margin-bottom:0; }
.testimonial-item .quote-loc{ font-size:13px; color:#8a8a8a; }

/* Footer credit line (kept per template license) */
.template-credit{ font-size:12px; opacity:.7; }
.template-credit a{ color:inherit; text-decoration:underline; }

/* Video hero (laptop-fixing footage, matches rljscomputers.com) */
.header-video{ min-height: 560px; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(1,31,56,0.90) 0%, rgba(0,45,79,0.68) 55%, rgba(1,58,99,0.32) 100%);
}
.hero-video-caption{
  position:relative; z-index:2; max-width:560px;
  padding: 130px 0;
}
@media (max-width: 767.98px){
  .header-video{ min-height: 480px; }
  .hero-video-caption{ padding: 90px 0; max-width:100%; }
}

/* Inline video used in the "Why Us" panel (desktop build/repair footage) */
.inline-video{ display:block; object-fit:cover; aspect-ratio: 4 / 5; background:#000; }

@media (max-width: 991.98px){
  .whatsapp-float{ width:52px; height:52px; right:16px; bottom:16px; }
  .whatsapp-float svg{ width:26px; height:26px; }
}

/* Footer / copyright: cohesive brand-navy gradient with a thin orange accent line, instead of the generic flat near-black the template shipped with */
.footer{
  background:linear-gradient(180deg, #011F38 0%, #00101F 100%) !important;
  border-top:3px solid var(--rljs-orange);
}
.copyright{
  background:#00101F !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

/* Page header bands (About / Services / Contact) get a subtle radial highlight for depth instead of a flat block colour */
.container-fluid.bg-secondary.py-5{
  position:relative; overflow:hidden;
}
.container-fluid.bg-secondary.py-5::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 20%, rgba(254,111,5,0.16) 0%, transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events:none;
}

/* Home page hero: company name lockup shown above the tagline */
.hero-brand-name{
  font-family:"Poppins", sans-serif;
  font-weight:800;
  font-size:clamp(22px, 3vw, 32px);
  letter-spacing:.02em;
  color:#fff;
  margin-bottom:6px;
}
.hero-brand-name span{ color:var(--rljs-orange); }

/* Contact page: equal-height info/map panel to match the enquiry form card and remove the leftover white gap below the map */
.contact-info-panel{
  display:flex; flex-direction:column; height:100%;
}
.contact-info-panel .contact-map{
  flex:1 1 auto; min-height:220px;
}