/* =========================================================
   FAMILY&FLATS PREMIUM ARTICLE CSS
   For individual blog/news article pages
========================================================= */

:root{
  --ff-dark:#0f172a;
  --ff-text:#334155;
  --ff-muted:#64748b;
  --ff-border:#e2e8f0;
  --ff-bg:#f7f9fc;
  --ff-card:#ffffff;
  --ff-blue:#2563eb;
  --ff-indigo:#4f46e5;
  --ff-purple:#7c3aed;
  --ff-shadow:0 24px 80px rgba(15,23,42,.10);
}

*,
*::before,
*::after{
  box-sizing:border-box;
  font-family:"Manrope", Arial, sans-serif !important;
}

html,
body{
  margin:0 !important;
  padding:0 !important;
  background:
    radial-gradient(circle at 8% 5%, rgba(37,99,235,.10), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(124,58,237,.10), transparent 30%),
    var(--ff-bg) !important;
  color:var(--ff-dark) !important;
  overflow-x:hidden !important;
}

a{
  color:var(--ff-blue);
  text-decoration:none !important;
}

/* ARTICLE PAGE */
section.py-5{
  padding:58px 18px 90px !important;
  background:transparent !important;
}

.blog-in{
  max-width:1180px !important;
  margin:0 auto !important;
  background:#fff !important;
  border:1px solid var(--ff-border) !important;
  border-radius:36px !important;
  padding:54px !important;
  box-shadow:var(--ff-shadow) !important;
}

.blog-in h2.text-center,
.blog-in .text-center.pb-4 h2{
  font-size:14px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  color:var(--ff-blue) !important;
  margin:0 0 20px !important;
}

.blog-in h3.text-center{
  max-width:930px !important;
  margin:0 auto 12px !important;
  font-size:clamp(36px,4.5vw,64px) !important;
  line-height:1.02 !important;
  font-weight:900 !important;
  letter-spacing:-0.07em !important;
  color:var(--ff-dark) !important;
}

.inner-date{
  color:var(--ff-muted) !important;
  font-size:13px !important;
  font-weight:800 !important;
  margin-bottom:36px !important;
}

.blog-first-img{
  width:100% !important;
  border-radius:32px !important;
  overflow:hidden !important;
  background:#e2e8f0 !important;
  box-shadow:0 24px 70px rgba(15,23,42,.16) !important;
  margin-bottom:48px !important;
}

.blog-first-img img{
  width:100% !important;
  height:500px !important;
  object-fit:cover !important;
  display:block !important;
}

/* Hide old sidebar / subscribe */
.right-side-content,
.blog-in form,
.blog-in input,
.blog-in button,
.blog-in .new-but-sub{
  display:none !important;
}

/* ARTICLE BODY */
.left-side-content.bg-blog-detail,
.bg-blog-detail{
  max-width:980px !important;
  margin:48px auto 0 !important;
  padding:56px 66px !important;
  background:#fff !important;
  border:1px solid var(--ff-border) !important;
  border-radius:32px !important;
  box-shadow:0 18px 55px rgba(15,23,42,.08) !important;
}

.left-side-content.bg-blog-detail p,
.bg-blog-detail p{
  color:var(--ff-text) !important;
  font-size:17px !important;
  line-height:1.95 !important;
  font-weight:500 !important;
  margin:0 0 22px !important;
  text-align:left !important;
}

.left-side-content.bg-blog-detail h2,
.left-side-content.bg-blog-detail h3,
.left-side-content.bg-blog-detail h4,
.bg-blog-detail h2,
.bg-blog-detail h3,
.bg-blog-detail h4{
  color:var(--ff-dark) !important;
  font-size:28px !important;
  line-height:1.24 !important;
  font-weight:900 !important;
  letter-spacing:-0.045em !important;
  margin:46px 0 16px !important;
  padding-left:18px !important;
  border-left:5px solid var(--ff-blue) !important;
  text-align:left !important;
}

/* RELATED ARTICLES */
.article-related{
  margin-top:34px !important;
  padding:30px !important;
  background:#f8fafc !important;
  border:1px solid var(--ff-border) !important;
  border-radius:30px !important;
  box-shadow:0 18px 55px rgba(15,23,42,.08) !important;
}

.article-related-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  gap:18px !important;
  margin-bottom:24px !important;
}

.article-related-head span{
  color:var(--ff-blue) !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.14em !important;
}

.article-related-head h3{
  margin:0 !important;
  color:var(--ff-dark) !important;
  font-size:34px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-0.055em !important;
}

#latestBlogsContainer,
.article-related-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:22px !important;
}

.latest-blog-card{
  background:#fff !important;
  border:1px solid var(--ff-border) !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:0 12px 35px rgba(15,23,42,.07) !important;
  transition:.22s ease !important;
}

.latest-blog-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 20px 55px rgba(15,23,42,.12) !important;
}

.latest-blog-card img{
  width:100% !important;
  height:185px !important;
  object-fit:cover !important;
  display:block !important;
}

.latest-blog-card-body{
  padding:16px !important;
}

.latest-blog-card h4{
  margin:0 0 8px !important;
  color:var(--ff-dark) !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
}

.latest-blog-card p{
  margin:0 !important;
  color:var(--ff-muted) !important;
  font-size:12px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
}

/* MOBILE */
@media(max-width:900px){
  section.py-5{
    padding:28px 14px 70px !important;
  }

  .blog-in{
    padding:26px !important;
    border-radius:26px !important;
  }

  .blog-in h3.text-center{
    font-size:32px !important;
    letter-spacing:-0.05em !important;
  }

  .blog-first-img img{
    height:280px !important;
  }

  .article-related{
    padding:22px !important;
  }

  .article-related-head{
    display:block !important;
  }

  .article-related-head h3{
    font-size:28px !important;
    margin-top:8px !important;
  }

  #latestBlogsContainer,
  .article-related-grid{
    grid-template-columns:1fr !important;
  }

  .left-side-content.bg-blog-detail,
  .bg-blog-detail{
    padding:30px 24px !important;
    border-radius:24px !important;
  }

  .left-side-content.bg-blog-detail p,
  .bg-blog-detail p{
    font-size:15.5px !important;
    line-height:1.85 !important;
  }
}
.site-footer{
  background:#07111f !important;
  color:#cbd5e1 !important;
  padding:70px 20px 28px !important;
  margin-top:0 !important;
}

.footer-container{
  max-width:1180px !important;
  margin:0 auto !important;
}

.footer-grid{
  display:grid !important;
  grid-template-columns:1.5fr .8fr 1fr !important;
  gap:42px !important;
  margin-bottom:34px !important;
}

.footer-col h4{
  color:#fff !important;
  font-size:18px !important;
  font-weight:900 !important;
  margin-bottom:16px !important;
}

.footer-col p,
.footer-col li,
.footer-col a{
  color:#cbd5e1 !important;
  font-size:14px !important;
  line-height:1.8 !important;
}

.footer-col ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}

.footer-socials{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:14px !important;
}

.footer-socials a{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  background:#132238 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-weight:900 !important;
}

.footer-disclaimer{
  border-top:1px solid rgba(255,255,255,.10) !important;
  padding-top:24px !important;
  color:#94a3b8 !important;
  font-size:13px !important;
  line-height:1.7 !important;
}

.footer-bottom,
.footer-bottom-links{
  text-align:center !important;
  margin-top:18px !important;
}

.footer-bottom a,
.footer-bottom-links a{
  color:#94a3b8 !important;
  font-size:13px !important;
  margin:0 10px !important;
}
.article-title {
  color: #0f172a;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 0 0 18px;
}