/* =========================================================
   COMFORT LINE — COMPLETE FRESH CSS (Premium Single-Page)
   Bootstrap 5 friendly • Logo-based palette • Fast + Clean
   Use with your existing header HTML (Comfort Line)
   ========================================================= */

/* -------------------------
   1) TOKENS / BASE
   ------------------------- */
/* =========================================================
   COMFORT LINE — HEADER (FRESH, BOOTSTRAP-INDEPENDENT)
   Fixes: nav/cta alignment + hides offcanvas + responsive
   ========================================================= */

/* =========================================================
   CLH HEADER — Transparent → Solid on scroll (Professional)
   Includes: mobile scrollable nav rail + drawer
   ========================================================= */

:root{
  --clh-blue:#0B3AA4;
  --clh-orange:#FF7A00;
  --clh-green:#0E8F3A;
  --clh-ink:#0C1017;
  --clh-border:rgba(12,16,23,.10);
  --clh-shadow:0 18px 55px rgba(12,16,23,.12);
  --clh-pill:999px;
  --clh-r16:16px;
  --clh-r20:20px;
}
/* =========================================================
   GLOBAL FONT OVERRIDE (WHOLE WEBSITE)
   Font: Plus Jakarta Sans
   ========================================================= */

:root{
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body{
  font-family: var(--font-sans) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force ALL elements to inherit the same font */
*,
*::before,
*::after{
  font-family: inherit;
}

/* Headings */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-sans) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

/* Paragraphs + list */
p, li{
  font-weight: 500;
  line-height: 1.75;
}

/* Buttons + nav */
a, button, .btn, .nav, .navbar, .dropdown, .offcanvas{
  font-family: var(--font-sans) !important;
}

/* Forms */
input, textarea, select, label{
  font-family: var(--font-sans) !important;
  font-weight: 600;
}

/* Bootstrap components that sometimes override fonts */
.modal, .toast, .popover, .tooltip, .accordion, .card{
  font-family: var(--font-sans) !important;
}

/* Optional: number alignment (looks premium) */
.tabular-nums{
  font-variant-numeric: tabular-nums;
}

/* Sticky header base */
.clh{
  position: sticky;
  top: 0;
  z-index: 9999;

  /* Transparent by default (over hero) */
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Solid state on scroll */
.clh.is-solid{
  background:
    radial-gradient(900px 180px at 15% 0%, rgba(11,58,164,.10), transparent 65%),
    radial-gradient(900px 180px at 85% 0%, rgba(255,122,0,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  border-bottom-color: rgba(12,16,23,.10);
  box-shadow: var(--clh-shadow);
}

/* Row layout */
.clh-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 4px 0;
}

/* Brand */
.clh-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  text-decoration:none;
}
.clh-logo{
  width: 180px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.clh-brandText{display:flex;flex-direction:column;line-height:1.1}
.clh-name{
  font-weight: 900;
  color: rgba(12,16,23,.92);
  letter-spacing:-.02em;
}
.clh-sub{
  margin-top: 4px;
  font-weight: 800;
  color: rgba(12,16,23,.62);
  font-size: .95rem;
}

/* Desktop nav (professional, minimal underline) */
.clh-nav{
  display:flex;
  align-items:center;
  gap: 18px;
  margin: 0 12px;
}
.clh-nav a{
  position:relative;
  text-decoration:none;
  font-weight: 900;
  color: rgba(12,16,23,.74);
  padding: 10px 2px;
  white-space: nowrap;
  transition: color .18s ease;
}
.clh-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(11,58,164,.20), rgba(255,122,0,.75), rgba(14,143,58,.20));
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .18s ease;
}
.clh-nav a:hover{color: rgba(12,16,23,.92)}
.clh-nav a:hover::after{transform: scaleX(1)}
.clh-nav a.is-active{color: rgba(12,16,23,.92)}
.clh-nav a.is-active::after{transform: scaleX(1)}

/* Actions */
.clh-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.clh-btn{
  height: 46px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration:none;
  color:#fff;
  border: none;
  transition: all .2s ease;
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.clh-icon-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#fff;
  text-decoration:none;
  transition: all .25s ease;
  box-shadow: 0 14px 35px rgba(0,0,0,.15);
}

.clh-icon-btn--wa{
  background: linear-gradient(135deg, #25D366, #1EBE5D);
  box-shadow: 0 14px 35px rgba(37,211,102,.35);
}

.clh-icon-btn--wa:hover{
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 45px rgba(37,211,102,.50);
}

/* =========================
   Call Button (Professional Blue)
   ========================= */
.clh-icon-btn--call{
  background: linear-gradient(135deg, #0B3AA4, #072a7a);
  box-shadow: 0 14px 35px rgba(11,58,164,.35);
}

.clh-icon-btn--call:hover{
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 45px rgba(11,58,164,.50);
}

/* =========================
   Mobile Menu Button
   ========================= */
.clh-menu{
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  color:#0C1017;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: all .2s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.clh-menu:hover{
  background:#fff;
  transform: translateY(-3px);
}

.clh-btn i{
  font-size: 1.1rem;
}
.clh-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.88)}

.clh-btn--wa{
  background: linear-gradient(135deg, #25D366, #1EBE5D);
  box-shadow: 0 14px 35px rgba(37,211,102,.35);
}
.clh-btn--wa i{color: var(--clh-orange)}
.clh-btn--wa:hover{background: rgba(255,122,0,.08)}

.clh-btn--call{
  background: linear-gradient(135deg, #0B3AA4, #072a7a);
  box-shadow: 0 14px 35px rgba(11,58,164,.35);
}
.clh-btn--call i{color: rgba(12,16,23,.92)}
.clh-btn--wa:hover{
  background: linear-gradient(135deg, #1EBE5D, #1aa851);
  transform: translateY(-2px);
  color:#0C1017;
  box-shadow: 0 18px 40px rgba(37,211,102,.45);
}
.clh-btn--call:active{
  transform: translateY(0);
}

/* Small screen icon-only adjustment */
@media (max-width: 575px){
  .clh-btn span{
    display:none;
  }
  .clh-btn{
    padding: 0 14px;
  }
}
.clh-btn--wa:active{
  transform: translateY(0);
}

/* Mobile menu icon */
.clh-menu{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(12,16,23,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(12,16,23,.10);
  display:none;
  align-items:center;
  justify-content:center;
}
.clh-menu i{color: rgba(12,16,23,.92); font-size: 1.1rem}

/* Scrollable nav rail (mobile/tablet) */
.clh-rail{
  display:none;
  gap: 10px;
  padding: 10px 0 12px 0;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.clh-rail::-webkit-scrollbar{display:none}

.clh-rail a{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: var(--clh-pill);
  border: 1px solid rgba(12,16,23,.10);
  background: rgba(255,255,255,.65);
  font-weight: 900;
  color: rgba(12,16,23,.82);
  text-decoration:none;
  white-space: nowrap;
}
.clh-rail a:hover{background: rgba(255,255,255,.88)}
.clh-rail a.is-active{
  border-color: rgba(255,122,0,.35);
  background: rgba(255,122,0,.10);
}

/* ---------------- Drawer ---------------- */
.clh-drawer{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.clh-drawer.is-open{display:block}

.clh-drawerBackdrop{
  position:absolute;
  inset:0;
  background: rgba(12,16,23,.45);
}

.clh-drawerPanel{
  position:absolute;
  top:0; right:0; bottom:0;
  width: min(420px, 92vw);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(11,58,164,.10), transparent 70%),
    radial-gradient(900px 240px at 85% 10%, rgba(255,122,0,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  border-left: 1px solid rgba(12,16,23,.10);
  backdrop-filter: blur(10px);
  padding: 16px;
  transform: translateX(110%);
  transition: transform .22s ease;
}
.clh-drawer.is-open .clh-drawerPanel{transform: translateX(0)}

.clh-drawerTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(12,16,23,.08);
}
.clh-drawerTitle{font-weight:900}
.clh-drawerSub{margin-top:4px;font-weight:800;color:rgba(12,16,23,.62)}
.clh-x{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(12,16,23,.10);
  background: rgba(12,16,23,.04);
  font-weight: 900;
  cursor:pointer;
}

.clh-drawerLinks{
  display:grid;
  gap: 10px;
  padding: 14px 0;
}
.clh-drawerLinks a{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(12,16,23,.08);
  background: rgba(12,16,23,.03);
  font-weight: 900;
  color: rgba(12,16,23,.90);
  text-decoration:none;
}
.clh-drawerLinks a:hover{
  background: rgba(255,122,0,.10);
  border-color: rgba(255,122,0,.25);
}

.clh-drawerCta{
  display:grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(12,16,23,.08);
}
.clh-note{
  margin-top: 6px;
  font-weight: 800;
  color: rgba(12,16,23,.66);
  line-height: 1.6;
  font-size: .95rem;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991px){
  .clh-nav{display:none}
  .clh-menu{display:inline-flex}
  .clh-rail{display:flex}
  .clh-brandText{display:none}
}
@media (max-width: 575px){
  .clh-btn span{display:none} /* icon buttons on small phones */
  .clh-btn{padding:0 12px}
}

/* Responsive header */
@media(max-width:991px){
  .cl-header-row{grid-template-columns:1fr auto}
  .cl-brand-logo{width:160px}
}
@media(max-width:560px){
  .cl-brand-logo{width:140px}
}

/* -------------------------
   5) HERO (Premium + Conversion)
   ------------------------- */
.cl-hero{padding:56px 0 20px 0}
@media(max-width:991px){.cl-hero{padding:44px 0 16px 0}}

.cl-hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
@media(max-width:991px){.cl-hero-grid{grid-template-columns:1fr;gap:14px}}

.cl-hero-card{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius) + 4px);
  padding:28px;
  border:1px solid rgba(12,16,23,.10);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(31,92,255,.14), transparent 60%),
    radial-gradient(800px 420px at 95% 5%, rgba(255,122,0,.12), transparent 62%),
    radial-gradient(820px 420px at 55% 0%, rgba(34,197,94,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  box-shadow:var(--shadow);
}
.cl-hero-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 260px at 50% 10%, rgba(246,196,69,.10), transparent 70%);
  pointer-events:none;
}
.cl-hero-card > *{position:relative}

.cl-hero h1{
  margin:10px 0 10px 0;
  font-size:clamp(2rem, 4vw, 3.05rem);
  line-height:1.08;
}
.cl-hero .sub{
  margin:0 0 16px 0;
  color:rgba(12,16,23,.76);
  max-width:72ch;
  font-weight:700;
}
.cl-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cl-hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.cl-hero-aside{
  padding:22px;
  border-radius:calc(var(--radius) + 2px);
  border:1px solid rgba(12,16,23,.10);
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-soft);
}

.cl-kpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
@media(max-width:575px){.cl-kpis{grid-template-columns:1fr}}

.cl-kpi{
  border-radius:18px;
  border:1px solid rgba(12,16,23,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  padding:14px;
}
.cl-kpi strong{display:block;font-size:1.05rem}
.cl-kpi span{display:block;color:rgba(12,16,23,.65);font-weight:700}

/* -------------------------
   6) CARDS GRID (Services / Fleet / Routes)
   ------------------------- */
.cl-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cl-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:991px){
  .cl-grid-4{grid-template-columns:repeat(2,1fr)}
  .cl-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
  .cl-grid-4,.cl-grid-3{grid-template-columns:1fr}
}

.cl-card-pad{padding:18px}
.cl-card-title{margin:0 0 6px 0;font-weight:900}
.cl-card-meta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* Icon circle */
.cl-ico{
  width:42px;height:42px;
  border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(12,16,23,.10);
  background:rgba(12,16,23,.03);
}
.cl-ico i{color:rgba(12,16,23,.88)}

/* -------------------------
   7) PRICING LOGIC (Compliance)
   ------------------------- */
.cl-steps{display:grid;gap:12px}
.cl-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(12,16,23,.10);
  background:rgba(255,255,255,.78);
}
.cl-step::before{
  counter-increment:step;
  content:counter(step);
  width:34px;height:34px;
  border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,122,0,.14);
  border:1px solid rgba(246,196,69,.35);
  font-weight:900;
}
.cl-steps{counter-reset:step}
.cl-step p{margin:0;color:rgba(12,16,23,.74);font-weight:700}

/* -------------------------
   8) TESTIMONIALS
   ------------------------- */
.cl-quote{padding:18px}
.cl-quote p{margin:0 0 12px 0;color:rgba(12,16,23,.78);font-weight:700}
.cl-by strong{font-weight:900}
.cl-by span{color:rgba(12,16,23,.65);font-weight:700}

/* -------------------------
   9) FAQ (Accordion-like)
   ------------------------- */
.cl-faq-item{
  border:1px solid rgba(12,16,23,.10);
  background:rgba(255,255,255,.80);
  border-radius:18px;
  overflow:hidden;
}
.cl-faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;
  background:transparent;
  border:0;
  color:rgba(12,16,23,.92);
  font-weight:900;
  cursor:pointer;
  text-align:left;
}
.cl-faq-a{
  padding:0 16px 14px 16px;
  color:rgba(12,16,23,.72);
  display:none;
  font-weight:700;
}
.cl-faq-item.is-open .cl-faq-a{display:block}
.cl-faq-icon{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid rgba(12,16,23,.10);
  background:rgba(12,16,23,.03);
}

/* -------------------------
   10) CONTACT + FORM
   ------------------------- */
.cl-input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(12,16,23,.14);
  background:rgba(255,255,255,.92);
  color:var(--cl-ink);
  outline:none;
  font-weight:700;
}
.cl-input:focus{
  border-color: rgba(255,122,0,.65);
  box-shadow: 0 0 0 4px rgba(255,122,0,.14), 0 0 0 7px rgba(31,92,255,.08);
}
.cl-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:575px){.cl-form-row{grid-template-columns:1fr}}

.cl-nap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media(max-width:767px){.cl-nap{grid-template-columns:1fr}}

/* -------------------------
   11) FOOTER + MOBILE CTA BAR
   ------------------------- */
.cl-footer{
  border-top:1px solid rgba(12,16,23,.10);
  background:rgba(255,255,255,.78);
  padding:34px 0 90px 0;
}

.cl-footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr;
  gap:18px;
}
@media(max-width:991px){.cl-footer-grid{grid-template-columns:1fr;gap:14px}}

/* Mobile sticky CTA bar */
.cl-mobile-cta{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  z-index:60;
  width:min(560px, calc(100% - 24px));
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(12,16,23,.10);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 55px rgba(12,16,23,.16);
  display:none;
}
.cl-mobile-cta .inner{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cl-mobile-cta .btn{border-radius:16px;padding:.75rem .9rem}
@media(max-width:991px){.cl-mobile-cta{display:block}}
@media(max-width:520px){.cl-mobile-cta .inner{grid-template-columns:1fr}}

/* -------------------------
   12) BOOTSTRAP SMALL FIXES
   ------------------------- */
.container{max-width:1180px}
.navbar-toggler{border:0}
.btn i{transform:translateY(-.5px)}

/* -------------------------
   13) OPTIONAL: ACTIVE LINK JS HOOK
   (If you add IntersectionObserver, it will toggle .is-active)
   ------------------------- */
[data-nav-link].is-active{}

/* END */