/* Page-specific styles for /blogs, lifted from the Rails inline <style>. */
figcaption h2 a{font-size: 18px;}

.form-box.prefix_profile.last {display: inline-block;vertical-align: top;}
  .mobile_col span.message {
  margin-left: -75px;}
  input#contact_mob_prefix1 {border-right:none;border-top-right-radius:initial;border-bottom-right-radius: initial;}
   .form-box.mobile_col.last {display: inline-block;width: calc(100% - 93px);}
  .form-box.prefix_profile.last{width: 90px;}
  input#contact_mobile {border-left: none;padding-left: 10px;letter-spacing:1px;}
  input#contact_mob_prefix1 {padding-left: 83px !important;}
  label span{color:red;}

.chat-icon{height: 80px;width: 80px;right: 20px !important;bottom: 65px !important; z-index: 9}
  .chat-icon img {width: 45px;}
  .message {bottom: -8px;}
  .mobile_col span.message {
    margin-left: -91px;
  }
  .proactive {
    position: fixed;
    bottom: 99px !important;
    right: 86px !important;
    width: auto;
  }
  .closeColor{background: #6691e7;}
  .cc-color-override-259567231.cc-window{background: #333 !important;}
  marquee { background: rgba(0, 0, 0, 0.5)}
  
  .rightTI { background: #ff002b;
    animation: marquee 25s linear infinite;
    animation-play-state: running;
  }
  .rightTI:hover {
    animation-play-state: paused;
  }
  @-webkit-keyframes marquee {
    0% {text-indent: 100%;}
    100% {text-indent: -100%;}
  }
  
  .rightCSS { 
    background: #a35dc1;
    overflow: hidden;
  } 
  .rightCSS div {
    position: relative;
    animation: CSSright linear 18s infinite;
    animation-play-state: running;
  } 
  @keyframes CSSright {
    0% {
      transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
  }
  .rightCSS:hover div {
    animation-play-state: paused;
  }
  
  .rightJS { background: #ffa900; }
  
  .rightJQ { background: #00a753; }
  
  .li {
    width: 100%;
    padding: 4px;
    position: absolute;
    right: 0;
    left: 0;
    top: 67px;
    z-index: 99;
    font-size: 13px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  
  .b_color{color: red;}
  .sub-menu-item li .seo-menu{padding-right: 20px !important;}
  
  @media screen and (max-width: 1700px) {
    .chat-icon{right: 15px !important;bottom: 40px !important;}
  }
  @media screen and (max-width: 1599px) {
    .chat-icon {right: 12px !important;bottom: 25px !important;}
    .proactive{bottom: 60px !important;right: 80px !important;}
  }
  @media screen and (max-width: 1279px) {
    .chat-icon {bottom: 25px !important;}
  }
  
  @media screen and (max-width: 1024px) {
    .li{top: 60px;}
    .chat-icon {height: 65px;width: 65px; bottom: 47px !important; right: 4px !important}
    .wa-icon{bottom: 20%;}
    .proactive{bottom: 73px !important;right: 64px !important;}
  }
  
  @media screen and (max-width: 767px) {
    .chat-icon {right: -3px !important;}
    .proactive{width: auto;bottom: 71px !important;right: 54px !important;}
    .wa-icon {bottom: 110px;}
    .chat-icon img {width: 40px;}
  }
  .sub-menu2 .submenu-arrow:hover .sub-menu3{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .sub-menu2 .submenu-arrow:hover .sub-menu4{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .sub-menu2 .submenu-arrow:hover .sub-menu5{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .sub-menu2 .submenu-arrow:hover .sub-menu6{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .add-space{padding-left: 15px;position: relative}
  .add-space:before{content: "-";position: absolute;left: 5px;top: 0;}
  .nav-bar-new .container li .sub-menu li .sub-menu2 li:first-child a{border-top:0}
  .nav-bar-new .container li .sub-menu li .sub-menu2 li .sub-menu3 li a {
    border-top: 1px solid rgba(255, 255, 255, 0.3);}
  .nav-bar-new .container li .sub-menu li .sub-menu2 li .sub-menu3 li:first-child a{border-top: 0}
  .hide{display: none;}

/* ------------------------------------------------------------------------
   Modern blog listing — index, category and author archives.
   Rebuilt 24 Sep 2026 (second pass) to match the real reference structure
   (featured post + 3-column grid) after the first pass's "single column"
   read of thewebtales.com/blog/ turned out to be wrong.

   Third pass, same day: the client sent a screenshot of a different
   reference and asked to match its SPACING and category presentation —
   confirmed via AskUserQuestion to mean layout/spacing only, keeping this
   site's own dark theme + #57C7F2 accent rather than that screenshot's
   white/orange. Changed here: bigger, more widely-spaced filter pills; the
   featured card is now a single fully-bordered rounded box (image flush to
   its left edge) instead of a borderless two-column layout with a bottom
   rule; the meta row lost its icons (see parts/blog-list.php); and
   "Read the article" is now plain underlined text instead of a button with
   an arrow icon.

   Fourth pass, same day: the category row was a single non-wrapping line
   (`overflow-x:auto`) that rendered as a horizontal slider with its own
   scrollbar and cut pills off at the viewport edge. Client asked for no
   slider — pills now wrap onto a few rows instead. Also added a little
   extra side padding to the whole listing container per the client's
   request, on top of the `.container` base class's own `width:90%`.

   Fifth pass, same day: client sent screenshots showing large blank gaps
   above "Blog - The Adroit" and below "Latest and Greatest Posts", before
   the category pills. Root cause (found by grepping application.css):
   `.heading02{margin-top:75px}` (active above 1500px) on top of
   `.header-space{padding-top:105px}` for the top gap — the header-space
   padding is real nav clearance shared by every page and stays untouched;
   only the heading's own extra margin is trimmed. For the bottom gap:
   `.section{padding-top:90px}` (the very widely shared page-section rule)
   plus `.blog-section{margin-top:25px}` stacked to ~115px before the
   pills. Rather than touching either shared rule, home.php now carries an
   extra `blog-hero-banner` class (ours, not the old site's) on the banner
   section purely so the heading override below can be scoped to it, and
   the next section is targeted via the already-unique two-class selector
   `.blog-section.blog-list-section` so Contact Us/Career and any other
   page reusing `.inner-banner-section`/`.contact-banner-section`/
   `.section`/`.blog-section` is unaffected.

   The outer wrapper is `.blog-listing-container`, not `.blog-container`:
   application.css already defines `.blog-section .blog-container` as a
   two-column grid (auto / 278px) left over from the pre-24-Sep listing, and
   this partial still renders inside `.blog-section` — reusing that name put
   the feed straight back into the old grid the first time (caught and fixed
   the same day).
   ------------------------------------------------------------------------ */

/* Fifth pass: tighten the blog banner's own spacing without touching the
   shared header-space/section/heading02 rules other pages depend on. */
.blog-hero-banner.inner-banner-section {
  padding-bottom: 40px;
}
.blog-hero-banner .heading02 {
  margin-top: 20px;
  margin-bottom: 14px;
}
.blog-hero-banner .heading03 {
  margin-bottom: 0;
}
.blog-section.blog-list-section {
  margin-top: 0;
  padding-top: 35px;
}

.blog-listing-container {
  display: block;
  max-width: 1300px;
  box-sizing: border-box;
  padding: 0 28px;
}

.blog-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 0 0 40px;
}
.blog-filter-tab {
  flex: 0 0 auto;
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: #ccc;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-filter-tab:hover {
  border-color: rgba(87,199,242,.5);
  color: #fff;
}
.blog-filter-tab.is-active {
  background: #57C7F2;
  border-color: #57C7F2;
  color: #000;
}

/* Featured card — the first post on page 1 only (parts/blog-list.php gates
   it with `! is_paged()`), a single bordered box: image flush left, copy
   right with generous internal padding. Stacks on tablet and below. */
.blog-featured-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 56px;
}
.blog-featured-img {
  display: block;
  position: relative;
  background: #111;
  min-height: 260px;
}
.blog-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  transition: transform .4s ease;
}
.blog-featured-card:hover .blog-featured-img img { transform: scale(1.03); }
.blog-featured-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 48px;
}
.blog-featured-title {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
}
.blog-featured-title a {
  color: #fff;
  text-decoration: none;
}
.blog-featured-title a:hover { color: #57C7F2; }
.blog-featured-body .blog-post-card-meta { margin-bottom: 16px; }
.blog-featured-body .blog-post-card-excerpt { font-size: 16px; }

.blog-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-feed-empty { color: #B0B0B0; font-size: 15px; grid-column: 1 / -1; }

.blog-post-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(87,199,242,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}

.blog-post-card-img {
  display: block;
  position: relative;
  aspect-ratio: 760 / 444;
  overflow: hidden;
  background: #111;
}
.blog-post-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.blog-post-card:hover .blog-post-card-img img { transform: scale(1.04); }

.blog-post-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-post-card-title {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 800;
}
.blog-post-card-title a {
  color: #fff;
  text-decoration: none;
}
.blog-post-card-title a:hover { color: #57C7F2; }

/* Meta row — plain text, no icons (third pass, 24 Sep 2026): date, author
   (linked when we have a slug), read time, separated by a generous gap. */
.blog-post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-bottom: 14px;
}
.blog-post-card-meta-item {
  font-size: 13px;
  color: #9a9a9a;
}
.blog-post-card-meta-item a { color: inherit; text-decoration: none; }
.blog-post-card-meta-item a:hover { color: #57C7F2; }

.blog-post-card-excerpt {
  color: #ccc;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Plain underlined text, no arrow icon (third pass) — matches the reference
   screenshot's "Read the article" treatment. */
.blog-post-card-link {
  display: inline-block;
  color: #57C7F2;
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: auto;
  transition: color .2s ease;
}
.blog-post-card-link:hover { color: #7fd6f7; }

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 46px;
}
.blog-pagination-link,
.blog-pagination span.blog-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: #ccc;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
a.blog-pagination-link:hover {
  border-color: rgba(87,199,242,.5);
  color: #fff;
}
.blog-pagination-link.current {
  background: #57C7F2;
  border-color: #57C7F2;
  color: #000;
}

@media screen and (max-width: 1023px) {
  .blog-feed-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 900px) {
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-img { min-height: 280px; }
  .blog-featured-body { padding: 32px 28px; }
}

@media screen and (max-width: 600px) {
  .blog-feed-grid { grid-template-columns: 1fr; }
  .blog-post-card-body { padding: 20px 20px 24px; }
  .blog-featured-title { font-size: 24px; }
  .blog-featured-body { padding: 26px 22px; }
  .blog-listing-container { padding: 0 18px; }
}