/* ==========================================================================
   Drivefab.com — Blog Design System
   Signature element: the "route line" — a dashed road-line divider and
   pin-style markers that echo the driving/navigation subject matter.
   ========================================================================== */

:root{
  --df-orange:      #F15A22;
  --df-orange-dark: #D8480F;
  --df-black:       #14141A;
  --df-ink:         #1E1E24;
  --df-gray-900:    #2B2B33;
  --df-gray-600:    #6B6B76;
  --df-gray-300:    #D8D8DE;
  --df-gray-100:    #F4F4F6;
  --df-white:       #FFFFFF;
  --df-gold:        #FFB100;

  --df-radius:      14px;
  --df-radius-sm:   8px;
  --df-shadow:      0 10px 30px rgba(20,20,26,0.08);
  --df-shadow-lg:   0 20px 50px rgba(20,20,26,0.16);
}

html{ scroll-behavior:smooth; }





/* ---------- Hero (blog listing) ---------- */
.df-blog-hero{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(241,90,34,.35), transparent 55%),
    linear-gradient(180deg,#181820 0%, var(--df-black) 100%);
  color:#fff;
  padding:4.5rem 0 3.5rem;
  position:relative;
  overflow:hidden;
}
.df-blog-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:60px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 26px, transparent 26px 52px);
  opacity:.5;
  mask-image: linear-gradient(180deg, transparent, #000 90%);
}
.df-blog-hero .df-eyebrow{ color:#F15A22; }
.df-blog-hero h1{ color:#fff; font-size:clamp(2rem, 4vw, 3rem); }
.df-blog-hero p{ color:rgba(255,255,255,.72); font-size:1.05rem; max-width:640px; }

.df-search-box{
  background:#fff;
  border-radius:12px;
  padding:.4rem;
  box-shadow:var(--df-shadow-lg);
}
.df-search-box input{
  border:0; outline:none; padding:.7rem 1rem; width:100%;
  font-size:.95rem; color:var(--df-ink); background:transparent;
}
.df-search-box button{
  background:#F15A22; color:#fff; border:0; border-radius:8px;
  padding:.7rem 1.2rem; font-weight:700; white-space:nowrap;
}

/* ---------- Category pills ---------- */
.df-pill{
  display:inline-flex; align-items:center;
  padding:.45rem 1rem;
  border-radius:999px;
  border:1.5px solid var(--df-gray-300);
  font-weight:600; font-size:.85rem; color:var(--df-ink);
  background:#fff;
  white-space:nowrap;
}
.df-pill.active,.df-pill:hover{
  border-color:#F15A22; background:#F15A22; color:#fff;
}

/* Services page Benefits */
 
  .db-feature-card{
    background:#e7e7e7;
    border-left:4px solid #f0451e;
    border-radius:.35rem;
    padding:1.5rem;
    height:100%;
  }

.db_feature_heading
{ font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 22px; font-weight: bold;
color: #ffffff;}

  .db-feature-icon{
    color:#f0451e;
    font-size:1.8rem;
    margin-bottom:.75rem;
  }
  .db-feature-card h5{
    font-weight:800;
    font-size:1.1rem;
    margin-bottom:.6rem;
  }

/* ---------- Blog cards ---------- */
.df-card{
  border:1px solid #c2c2c2;
  border-radius:var(--df-radius);
  overflow:hidden;
  background:#fff;
  transition:.25s ease;
  height:100%;
}
.df-card:hover{ box-shadow:var(--df-shadow-lg); transform:translateY(-4px); }
.df-card-img{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--df-gray-100);
}
.df-card-img img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.df-card:hover .df-card-img img{ transform:scale(1.06); }
.df-card-cat{
  position:absolute; top:12px; left:12px;
  background:#565656; color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.32rem .7rem; border-radius:999px;
}
.df-card-body{ padding:1.3rem; }
.df-card-meta{
  display:flex; align-items:center; gap:.9rem;
  font-size:.78rem; color:var(--df-gray-600); font-weight:600;
  margin-bottom:.6rem;
}
.df-card-meta .df-dot::before{ content:"•"; margin-right:.9rem; color:var(--df-gray-300); }

.df-card:hover .df-card-title{ color:#F15A22; }
.df-card-excerpt{ color:var(--df-gray-600); font-size:.9rem; line-height:1.55; }
.df-card-readmore{
  font-weight:700; font-size:.85rem; color:#F15A22;
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem;
}

/* Featured (large) card */
.df-card-featured{
  border-radius:var(--df-radius);
  overflow:hidden; position:relative; color:#fff; min-height:420px;
  display:flex; align-items:flex-end;
}
.df-card-featured img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.df-card-featured::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(20,20,26,0) 25%, rgba(20,20,26,.92) 100%);
}
.df-card-featured .df-card-body{ position:relative; z-index:2; padding:2rem; }
.df-card-featured .df-card-title{ color:#fff; font-size:1.6rem; }
.df-card-featured .df-card-meta{ color:rgba(255,255,255,.75); }
.df-card-featured .df-card-excerpt{ color:rgba(255,255,255,.8); }

/* ---------- Sidebar ---------- */
.df-side-box{
  border:1px solid var(--df-gray-100);
  border-radius:var(--df-radius);
  padding:1.4rem;
  margin-bottom:1.5rem;
  background:#fff;
}
.df-side-title{
  font-size:1rem; font-weight:700; margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
}
.df-side-title::before{
  content:""; width:6px; height:18px; border-radius:3px; background:#F15A22;
}
.df-side-post{ display:flex; gap:.8rem; margin-bottom:1rem; }
.df-side-post img{
  width:64px; height:64px; border-radius:10px; object-fit:cover; flex:0 0 auto;
}
.df-side-post h6{ font-size:.87rem; font-weight:700; margin-bottom:.25rem; line-height:1.35; }
.df-side-post span{ font-size:.75rem; color:var(--df-gray-600); font-weight:600; }
.df-tag{
  display:inline-block; padding:.4rem .8rem; margin:0 .4rem .4rem 0;
  border-radius:8px; background:var(--df-gray-100); color:var(--df-ink);
  font-size:.8rem; font-weight:600;
}
.df-tag:hover{ background:#F15A22; color:#fff; }
.df-cat-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:.6rem 0; border-bottom:1px dashed var(--df-gray-300);
  font-weight:600; font-size:.9rem;
}
.df-cat-list li:last-child{ border-bottom:0; }
.df-cat-list a{ color:var(--df-ink); }
.df-cat-list a:hover{ color:#F15A22; }
.df-cat-list .badge-count{
  background:var(--df-gray-100); color:var(--df-gray-600);
  font-weight:700; font-size:.75rem; border-radius:999px; padding:.25rem .55rem;
}

/* Sidebar CTA (booking) matching brand */
.df-side-cta{
  background:linear-gradient(160deg,var(--df-black), #24242c);
  border-radius:var(--df-radius);
  padding:1.6rem; color:#fff; margin-bottom:1.5rem;
  text-align:center;
}
.df-side-cta h6{ color:#fff; font-weight:700; margin-bottom:.3rem; }
.df-side-cta p{ color:rgba(255,255,255,.68); font-size:.85rem; margin-bottom:1.1rem; }

/* ---------- Pagination ---------- */
.df-pagination .page-link{
  border:1.5px solid var(--df-gray-300); color:var(--df-ink); font-weight:700;
  margin:0 .25rem; border-radius:8px !important; min-width:42px; text-align:center;
}
.df-pagination .page-item.active .page-link{
  background:#F15A22; border-color:#F15A22; color:#fff;
}
.df-pagination .page-link:hover{ border-color:#F15A22; color:#F15A22; }



/* ---------- Article (detail page) ---------- */
.df-article-hero{
  position:relative; border-radius:var(--df-radius); overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end; color:#fff;
  margin-bottom:2rem;
}
.df-article-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.df-article-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,26,.15) 20%, rgba(20,20,26,.92) 100%);
}
.df-article-hero .content{ position:relative; padding:2.2rem; z-index:2; }
.df-article-hero h1{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.4rem); max-width:820px; }

.df-author-row{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  font-size:.85rem; font-weight:600;
}
.df-author-row img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.df-article-hero .df-author-row{ color:rgba(255,255,255,.85); }

.df-article-body{ font-size:1.04rem; line-height:1.85; color:var(--df-gray-900); }
.df-article-body h2{
  font-size:1.5rem; margin-top:2.2rem; margin-bottom:1rem;
  padding-top:.2rem;
}
.df-article-body h3{ font-size:1.2rem; margin-top:1.7rem; margin-bottom:.8rem; }
.df-article-body p{ margin-bottom:1.2rem; }
.df-article-body ul,.df-article-body ol{ margin-bottom:1.2rem; padding-left:1.4rem; }
.df-article-body li{ margin-bottom:.5rem; }
.df-article-body blockquote{
  border-left:4px solid #F15A22;
  background:var(--df-gray-100);
  padding:1.1rem 1.4rem; border-radius:0 10px 10px 0;
  font-weight:600; font-style:italic; color:var(--df-ink); margin:1.6rem 0;
}
.df-article-body img.df-inline-img{
  width:100%; border-radius:12px; margin:1.4rem 0;
}
.df-figcap{ font-size:.82rem; color:var(--df-gray-600); text-align:center; margin-top:-1rem; margin-bottom:1.6rem; }

.df-callout{
  background:linear-gradient(135deg,#FFF3EC,#FFE7DA);
  border:1px solid #FFD3BC;
  border-radius:var(--df-radius);
  padding:1.4rem 1.6rem; margin:1.8rem 0;
  display:flex; gap:1rem; align-items:flex-start;
}
.df-callout .icon{
  width:42px;height:42px; border-radius:10px; background:#F15A22; color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}

.df-share-rail{
  display:flex; flex-direction:column; gap:.6rem; align-items:center;
  position:sticky; top:110px;
}
.df-share-btn{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--df-gray-300);
  display:flex; align-items:center; justify-content:center; color:var(--df-ink);
}
.df-share-btn:hover{ background:#F15A22; border-color:#F15A22; color:#fff; }

.df-toc{
  border:1px solid var(--df-gray-100); border-radius:var(--df-radius); padding:1.2rem 1.4rem;
  background:var(--df-gray-100); margin-bottom:2rem;
}
.df-toc a{ color:var(--df-ink); font-weight:600; font-size:.9rem; display:block; padding:.35rem 0; }
.df-toc a:hover{ color:#F15A22; }

.df-tagcloud a{ margin-right:.5rem; }

.df-author-card{
  display:flex; gap:1.2rem; padding:1.6rem;
  border:1px solid var(--df-gray-100); border-radius:var(--df-radius);
  background:var(--df-gray-100); margin:2rem 0;
}
.df-author-card img{ width:76px; height:76px; border-radius:50%; object-fit:cover; flex:0 0 auto; }

.df-comment{
  display:flex; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--df-gray-100);
}
.df-comment img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.df-comment-form textarea,.df-comment-form input{
  border:1.5px solid var(--df-gray-300); border-radius:10px; padding:.75rem 1rem;
}
.df-comment-form textarea:focus,.df-comment-form input:focus{
  border-color:#F15A22; box-shadow:0 0 0 .18rem rgba(241,90,34,.15);
}




@media (max-width:991.98px){
  body{ padding-bottom:64px; }
  .df-mobile-cta{ display:flex; }
}
@media (min-width:992px){
  .df-mobile-cta{ display:none; }
}