.elementor-22707 .elementor-element.elementor-element-ea633a3{--display:flex;--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:-60px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22707 .elementor-element.elementor-element-ca4f2c6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-22707 .elementor-element.elementor-element-f22e28e{--display:flex;}.elementor-22707 .elementor-element.elementor-element-a3d6530 .ha-pg-grid-wrap{grid-template-columns:repeat( 3, 1fr );grid-column-gap:30px;grid-row-gap:35px;}.elementor-22707 .elementor-element.elementor-element-a3d6530 .ha-pg-pagination-wrap{text-align:right;}.elementor-22707 .elementor-element.elementor-element-a3d6530 .ha-pg-loadmore-wrap{text-align:right;}.elementor-22707 .elementor-element.elementor-element-a3d6530 .ha-pg-pagination-wrap .page-numbers:not(:last-child){margin-right:10px;}.elementor-22707 .elementor-element.elementor-element-4f45a71{--display:flex;}@media(max-width:999px){.elementor-22707 .elementor-element.elementor-element-a3d6530 .ha-pg-grid-wrap{grid-template-columns:repeat( 2, 1fr );}}@media(max-width:689px){.elementor-22707 .elementor-element.elementor-element-a3d6530 .ha-pg-grid-wrap{grid-template-columns:repeat( 1, 1fr );}}/* Start custom CSS for ha-post-grid-new, class: .elementor-element-a3d6530 *//* ---------- ARTICLE GRID (Posts widget) ---------- */
.pm-posts .elementor-posts-container,
.pm-posts .elementor-posts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media(max-width:960px){
  .pm-posts .elementor-posts-container,
  .pm-posts .elementor-posts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .pm-posts .elementor-posts-container,
  .pm-posts .elementor-posts{grid-template-columns:1fr}
}

/* card shell */
.pm-posts .elementor-post{
  margin:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pm-posts .elementor-post:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 36px rgba(0,0,0,.12);
}

/* thumbnail 16:9 with hover zoom */
.pm-posts .elementor-post__thumbnail{
  aspect-ratio:16/9;
  overflow:hidden;
  margin:0;
  border-radius:0;
}
.pm-posts .elementor-post__thumbnail img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.pm-posts .elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.05)}

/* text block */
.pm-posts .elementor-post__text{
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.pm-posts .elementor-post__title{margin:0 0 10px;font-family:'Lexend',sans-serif}
.pm-posts .elementor-post__title a{
  font-weight:600;font-size:18px;line-height:1.35;color:#111827;text-decoration:none;
}
.pm-posts .elementor-post__title a:hover{color:#D42E7D}
.pm-posts .elementor-post__meta-data{
  font-family:'Lexend',sans-serif;font-size:13px;color:#9CA3AF;margin-bottom:10px;
}
.pm-posts .elementor-post__excerpt p{
  font-family:'Lexend',sans-serif;font-size:14px;line-height:1.6;color:#4B5563;margin:0 0 18px;
}
.pm-posts .elementor-post__read-more{
  margin-top:auto;
  font-family:'Lexend',sans-serif;font-weight:600;font-size:14px;color:#D42E7D;text-decoration:none;
}
.pm-posts .elementor-post__read-more:hover{color:#B02268}

/* ---------- PAGINATION (2, 3, 4 ... Next) ---------- */
.pm-posts .elementor-pagination{
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:48px;
}
.pm-posts .elementor-pagination .page-numbers{
  min-width:40px;height:40px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Lexend',sans-serif;font-weight:500;font-size:14px;color:#4B5563;
  background:#fff;border:1px solid #E2E4E8;border-radius:9999px;text-decoration:none;
  transition:all .2s ease;
}
.pm-posts .elementor-pagination .page-numbers:hover{border-color:#D42E7D;color:#D42E7D}
.pm-posts .elementor-pagination .page-numbers.current{
  background:#D42E7D;border-color:#D42E7D;color:#fff;
}
.pm-posts .elementor-pagination .page-numbers.dots{border:none;background:none}

/* ---------- NEWSLETTER FORM (e53a8c7) ---------- */
.pm-newsletter .elementor-form{
  display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;align-items:stretch;
}
.pm-newsletter .elementor-field-group{flex:1;margin:0;min-width:200px}
.pm-newsletter .elementor-field-textual{
  width:100%;
  font-family:'Lexend',sans-serif;font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:9999px;
  padding:14px 22px;
}
.pm-newsletter .elementor-field-textual::placeholder{color:rgba(255,255,255,.45)}
.pm-newsletter .elementor-field-textual:focus{border-color:#01F7FF;outline:none}
.pm-newsletter .elementor-button,
.pm-newsletter button[type="submit"]{
  background:#D42E7D;color:#fff;border:none;border-radius:9999px;
  padding:14px 32px;
  font-family:'Lexend',sans-serif;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:background .25s ease;
}
.pm-newsletter .elementor-button:hover,
.pm-newsletter button[type="submit"]:hover{background:#B02268}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f22e28e *//* ============================================================
   PATHMONK BLOG HUB - SKIN  (for the Happy Addons "Post Grid" widget)
   Paste into: Elementor > (blog page) > Settings > Advanced > Custom CSS
   No CSS class needed: page Custom CSS only loads on this page, so the
   .ha-pg-* .elementor-22707 .elementor-element.elementor-element-f22e28es only affect this grid.

   Targets the live markup found on pathmonk.com/blog/ (Happy Addons
   Post Grid: ha-pg-item, ha-pg-title, ha-pg-excerpt, ha-pg-thumb, etc.).
   If your new grid uses a different widget, tell me which and I will
   re-point the .elementor-22707 .elementor-element.elementor-element-f22e28es. You can also set most of this in the widget's
   own Style panel; CSS just does it in one paste.
   ============================================================ */

/* ---------- CARD ---------- */
.ha-pg-wrapper .ha-pg-item{
  background:#fff !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 2px 16px rgba(0,0,0,.06) !important;
  border:none !important;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ha-pg-wrapper .ha-pg-item:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 36px rgba(0,0,0,.12) !important;
}

/* ---------- THUMBNAIL (16:9 + hover zoom) ---------- */
.ha-pg-wrapper .ha-pg-thumb-area{aspect-ratio:16/9;overflow:hidden}
.ha-pg-wrapper .ha-pg-thumb,
.ha-pg-wrapper .ha-pg-thumb a,
.ha-pg-wrapper .ha-pg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ha-pg-wrapper .ha-pg-thumb img{transition:transform .4s ease}
.ha-pg-wrapper .ha-pg-item:hover .ha-pg-thumb img{transform:scale(1.05)}

/* ---------- CONTENT ---------- */
.ha-pg-wrapper .ha-pg-content-area{padding:24px !important}
.ha-pg-wrapper .ha-pg-title{margin:0 0 10px !important}
.ha-pg-wrapper .ha-pg-title,
.ha-pg-wrapper .ha-pg-title a{
  font-family:'Lexend',sans-serif !important;
  font-weight:600 !important;
  font-size:18px !important;
  line-height:1.35 !important;
  color:#111827 !important;
  text-decoration:none !important;
}
.ha-pg-wrapper .ha-pg-title a:hover{color:#D42E7D !important}
.ha-pg-wrapper .ha-pg-excerpt,
.ha-pg-wrapper .ha-pg-excerpt p{
  font-family:'Lexend',sans-serif !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:#4B5563 !important;
  margin:0 0 14px !important;
}
.ha-pg-wrapper .ha-pg-meta-wrap,
.ha-pg-wrapper .ha-pg-date,
.ha-pg-wrapper .ha-pg-date-text{
  font-family:'Lexend',sans-serif !important;
  font-size:13px !important;
  color:#9CA3AF !important;
}

/* category badge -> gradient pill (matches the AI-signal eyebrow) */
.ha-pg-wrapper .ha-pg-badge-taxonomy{
  font-family:'Lexend',sans-serif !important;
  font-weight:600 !important;
  font-size:11px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  background:linear-gradient(90deg,#3283EB,#01F7FF) !important;
  color:#fff !important;
  border-radius:9999px !important;
  padding:4px 12px !important;
}

/* ---------- PAGINATION (2, 3, 4 ... Next) ---------- */
.ha-pg-pagination-wrap{
  display:flex !important;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:48px;
}
.ha-pg-pagination-wrap .page-numbers{
  min-width:40px;height:40px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Lexend',sans-serif !important;font-weight:500 !important;font-size:14px !important;color:#4B5563 !important;
  background:#fff !important;border:1px solid #E2E4E8 !important;border-radius:9999px !important;text-decoration:none !important;
  transition:all .2s ease;
}
.ha-pg-pagination-wrap .page-numbers:hover{border-color:#D42E7D !important;color:#D42E7D !important}
.ha-pg-pagination-wrap .page-numbers.current{background:#D42E7D !important;border-color:#D42E7D !important;color:#fff !important}
.ha-pg-pagination-wrap .page-numbers.dots{border:none !important;background:none !important}

/* ---------- NEWSLETTER FORM (e53a8c7, add CSS class: pm-newsletter) ---------- */
.pm-newsletter .elementor-form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;align-items:stretch}
.pm-newsletter .elementor-field-group{flex:1;margin:0;min-width:200px}
.pm-newsletter .elementor-field-textual{
  width:100%;font-family:'Lexend',sans-serif !important;font-size:15px !important;color:#fff !important;
  background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;
  border-radius:9999px !important;padding:14px 22px !important;
}
.pm-newsletter .elementor-field-textual::placeholder{color:rgba(255,255,255,.45) !important}
.pm-newsletter .elementor-button,
.pm-newsletter button[type="submit"]{
  background:#D42E7D !important;color:#fff !important;border:none !important;border-radius:9999px !important;
  padding:14px 32px !important;font-family:'Lexend',sans-serif !important;font-weight:600 !important;
  font-size:14px !important;letter-spacing:.12em !important;text-transform:uppercase !important;cursor:pointer;
}
.pm-newsletter .elementor-button:hover,
.pm-newsletter button[type="submit"]:hover{background:#B02268 !important}/* End custom CSS */