/* default */
.header-logo .os-logo--dark { display: none; }
.footer-logo img { max-width:75%!important; }

/* when dark mode is active */
body.dark-mode .header-logo .os-logo--light,
body.dark .header-logo .os-logo--light,
html[data-theme="dark"] .header-logo .os-logo--light {
  display: none;
}
body.dark-mode .header-logo .os-logo--dark,
body.dark .header-logo .os-logo--dark,
html[data-theme="dark"] .header-logo .os-logo--dark {
  display: inline-block;
}

.nav-logo{ height:65px; width:auto; display:block; }
.ser-widget a { font-size:16px!important; }
.mb-5 {margin-bottom:5px!important}
.h40vh {height:40vh!important;}
.h50 {height:50%!important;}
.h75 {height:75%!important;}
.pt-ca2 {padding-top: calc(var(--bs-gutter-x) / 2)!important;}
.pb-ca2 {padding-bottom: calc(var(--bs-gutter-x) / 2)!important;}
.w-100 {width:100%!important}
.custom-header-size-1 {font-size:40px!important;line-height:40px!important;}
.custom-header-size-2 {font-size:30px!important;line-height:30px!important;}
.custom-title-area1 {
    position: absolute;
    top: 100px;
  	left: 65px;
}

.blog-single-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.blog-single-content figure {
  margin: 24px 0;
}

.blog-single-content figcaption,
.blog-single-content .wp-caption-text {
  opacity: .85;
  font-size: 14px;
  margin-top: 10px;
}

.osx-video { position: relative; border-radius: 14px; overflow: hidden; }
.osx-video__btn { border: 0; padding: 0; width: 100%; display: block; background: transparent; cursor: pointer; }
.osx-video__poster { width: 100%; height: auto; display: block; }
.osx-video__fallback { width: 100%; padding-top: 56.25%; background: rgba(255,255,255,.06); }

.osx-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.osx-video__play::before {
  content: "";
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.osx-video__play::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: translateX(4px);
}

/* Aiero-style combined search bar */
.osx-searchbar{
  position: relative;
  display: flex;
  align-items: center;

  /* this is what makes it “double length” */
  width: min(720px, 100%);
  max-width: 100%;

  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.osx-searchbar__input{
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 10px;
  font-size: 16px;
  line-height: 1;
}

.osx-filterbtn,
.osx-searchbar__submit{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.osx-filterbtn i,
.osx-searchbar__submit i{
  font-size: 16px;
}

.osx-filterbtn:hover,
.osx-searchbar__submit:hover{
  background: rgba(0,0,0,.06);
}

/* Make it keep Aiero spacing on small screens */
@media (max-width: 575.98px){
  .osx-searchbar{
    width: 100%;
  }
}

/* Row layout: Search left, Sort right */
.osx-blog-filter__inner{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap; /* allows stacking on small screens */
}

/* Let search take remaining space */
.osx-searchbar{
  flex: 1 1 520px; /* grows wide, but can shrink */
  width: auto;     /* override fixed width */
}

/* Sort pill sits to the right */
.osx-sortpill{
  flex: 0 0 auto;
  position: relative;
}

/* Mobile: stack cleanly */
@media (max-width: 575.98px){
  .osx-searchbar{ flex-basis: 100%; }
  .osx-sortpill{ width: 100%; }
}
.separator--custom {
    width: 100%;
    height: 1px;
    background: -webkit-linear-gradient(left, #8258c8, #2c84c8);
    background: linear-gradient(to right, #8258c8, #2c84c8);
}
.blog-img4__link {
  position: relative;
  display: block;
}

.blog-img4__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* adjust if needed */
  overflow: hidden;
}

.blog-img4__img,
.blog-img4__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-img4__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.blog-img4__play {
  font-size: 64px;
  line-height: 1;
}

.blog-img4__cta {
  font-size: 16px;
}

.blog-img4__link.is-playing .blog-img4__overlay {
  display: none;
}

/* ============================
   OSINTERSECT Prose (Gutenberg)
   Drop-in "Aiero-ish" styling
   ============================ */

.blog-single-content .osx-prose{
  --osx-text: rgba(0,0,0,.84);
  --osx-muted: rgba(0,0,0,.62);
  --osx-border: rgba(0,0,0,.10);
  --osx-card: rgba(0,0,0,.035);
  --osx-grad: linear-gradient(90deg,#8258c8,#2c84c8);

  color: var(--osx-text);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

body.dark-mode .blog-single-content .osx-prose,
body.dark .blog-single-content .osx-prose,
html[data-theme="dark"] .blog-single-content .osx-prose{
  --osx-text: rgba(255,255,255,.86);
  --osx-muted: rgba(255,255,255,.62);
  --osx-border: rgba(255,255,255,.12);
  --osx-card: rgba(255,255,255,.06);
}

/* Vertical rhythm (fixes “flat” spacing) */
.blog-single-content .osx-prose > *{
  margin: 0;
}
.blog-single-content .osx-prose > * + *{
  margin-top: 18px;
}
.blog-single-content .osx-prose p{
  margin: 0;
}
.blog-single-content .osx-prose h2,
.blog-single-content .osx-prose h3,
.blog-single-content .osx-prose h4{
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.25;
  margin-top: 26px;
}
.blog-single-content .osx-prose h2{ font-size: 30px; }
.blog-single-content .osx-prose h3{ font-size: 24px; }
.blog-single-content .osx-prose h4{ font-size: 19px; }

/* Links */
.blog-single-content .osx-prose a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.blog-single-content .osx-prose a:hover{
  text-decoration-color: rgba(44,132,200,.9);
}

/* Images + captions (fixes caption width and makes images feel “designed”) */
.blog-single-content .osx-prose figure{
  margin: 0;
}
.blog-single-content .osx-prose .wp-block-image,
.blog-single-content .osx-prose figure.wp-block-image{
  margin-top: 24px;
  margin-bottom: 24px;
}
.blog-single-content .osx-prose .wp-block-image img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
}

/* Make “normal” images fill the content width so caption matches the block */
.blog-single-content .osx-prose .wp-block-image:not(.is-resized):not(.alignleft):not(.alignright) img{
  width: 100%;
}

/* Don’t force width for resized/float images */
.blog-single-content .osx-prose .wp-block-image.is-resized img,
.blog-single-content .osx-prose .wp-block-image.alignleft img,
.blog-single-content .osx-prose .wp-block-image.alignright img{
  width: auto;
}

/* Caption styling (always stays with the image block) */
.blog-single-content .osx-prose figcaption,
.blog-single-content .osx-prose .wp-caption-text{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--osx-muted);
  opacity: 1;
}

/* Blockquotes (Aiero-style “quote card”) */
.blog-single-content .osx-prose blockquote,
.blog-single-content .osx-prose .wp-block-quote{
  position: relative;
  padding: 18px 20px 18px 22px;
  border-radius: 18px;
  background: var(--osx-card);
  border: 1px solid var(--osx-border);
}
.blog-single-content .osx-prose blockquote::before,
.blog-single-content .osx-prose .wp-block-quote::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: var(--osx-grad);
}
.blog-single-content .osx-prose blockquote p,
.blog-single-content .osx-prose .wp-block-quote p{
  margin: 0;
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
}
.blog-single-content .osx-prose blockquote cite,
.blog-single-content .osx-prose blockquote footer,
.blog-single-content .osx-prose .wp-block-quote cite,
.blog-single-content .osx-prose .wp-block-quote footer{
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 14px;
  color: var(--osx-muted);
}

/* Pullquote: same card, centered */
.blog-single-content .osx-prose .wp-block-pullquote{
  padding: 0;
  border: 0;
}
.blog-single-content .osx-prose .wp-block-pullquote blockquote{
  text-align: center;
}

/* Separators / HR */
.blog-single-content .osx-prose hr,
.blog-single-content .osx-prose .wp-block-separator{
  border: 0;
  height: 1px;
  background: var(--osx-grad);
  opacity: 1;
}

/* Columns */
.blog-single-content .osx-prose .wp-block-columns{
  gap: 22px;
}

/* Code blocks */
.blog-single-content .osx-prose pre,
.blog-single-content .osx-prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.blog-single-content .osx-prose pre{
  padding: 16px;
  border-radius: 16px;
  background: var(--osx-card);
  border: 1px solid var(--osx-border);
  overflow: auto;
}

/* Tables */
.blog-single-content .osx-prose table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--osx-border);
  border-radius: 14px;
  overflow: hidden;
}
.blog-single-content .osx-prose th,
.blog-single-content .osx-prose td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--osx-border);
}
.blog-single-content .osx-prose th{
  background: var(--osx-card);
  text-align: left;
}
/* === FIX: captions follow resized image width === */
.blog-single-content .osx-prose figure.wp-block-image.is-resized,
.blog-single-content .osx-prose figure.wp-block-image[style*="width"],
.blog-single-content .osx-prose .wp-caption {
  display: inline-block;   /* shrink-wrap to image */
  max-width: 100%;
}

/* Ensure image fills the shrink-wrapped figure */
.blog-single-content .osx-prose figure.wp-block-image.is-resized img,
.blog-single-content .osx-prose figure.wp-block-image[style*="width"] img,
.blog-single-content .osx-prose .wp-caption img {
  width: 100%;
  height: auto;
}

/* ==========================================
   Gutenberg Gallery (your actual markup)
   wp-block-gallery.has-nested-images
   ========================================== */

/* Let WP handle styling, we only control layout */
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin: 24px 0 !important;
}

/* Default (columns-default): make it 2 columns on desktop */
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images > figure.wp-block-image{
  margin: 0 !important;
  flex: 0 0 calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
}

/* If you explicitly set Columns = 3 or 4 in Gutenberg */
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images.columns-3 > figure.wp-block-image{
  flex-basis: calc(33.333% - 10.666px) !important;
  max-width: calc(33.333% - 10.666px) !important;
}
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images.columns-4 > figure.wp-block-image{
  flex-basis: calc(25% - 12px) !important;
  max-width: calc(25% - 12px) !important;
}

/* Images fill their tile (no weird intrinsic sizing) */
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images > figure.wp-block-image img{
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 16px;
}

/* Mobile: stack 1 per row */
@media (max-width: 575.98px){
  .blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images > figure.wp-block-image{
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================
   Resized single image captions (your markup)
   <figure class="wp-block-image ... is-resized">
   ========================================== */

.blog-single-content .osx-prose figure.wp-block-image.is-resized{
  display: table !important;   /* caption will match image width */
  max-width: 100% !important;
}

.blog-single-content .osx-prose figure.wp-block-image.is-resized.aligncenter{
  margin-left: auto !important;
  margin-right: auto !important;
}

.blog-single-content .osx-prose figure.wp-block-image.is-resized > figcaption{
  display: table-caption !important;
  caption-side: bottom;
}
/* Clip gallery captions to rounded corners */
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images > figure.wp-block-image{
  border-radius: 16px;
  overflow: hidden; /* this is the key */
}

/* If WP wraps image in <a> or <div>, clip those too */
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images > figure.wp-block-image > a,
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images > figure.wp-block-image > div{
  border-radius: inherit;
  overflow: hidden;
}

/* Let the image fill the rounded tile */
.blog-single-content .osx-prose figure.wp-block-gallery.has-nested-images > figure.wp-block-image img{
  border-radius: 0 !important; /* avoid double rounding glitches */
  width: 100% !important;
  display: block;
}

/* ==========================================
   Aiero-style Blockquote (Gutenberg)
   Matches: <blockquote class="wp-block-quote">
   ========================================== */

.blog-single-content .osx-prose blockquote.wp-block-quote{
  position: relative;
  padding: 34px 40px;
  border-radius: 28px;
  border: 0 !important;
  margin: 28px 0;
  background: rgba(0,0,0,.035);
  overflow: hidden;
}

/* Dark mode */
body.dark-mode .blog-single-content .osx-prose blockquote.wp-block-quote,
body.dark .blog-single-content .osx-prose blockquote.wp-block-quote,
html[data-theme="dark"] .blog-single-content .osx-prose blockquote.wp-block-quote{
  background: rgba(255,255,255,.06);
}

/* Aiero-ish “quote mark” blob on the left */
.blog-single-content .osx-prose blockquote.wp-block-quote::before{
  content: "";
  position: absolute;
  left: 26px;
  top: 34px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(49,205,207,.95), rgba(44,132,200,.95));
  opacity: .95;
}

/* Two small “quote marks” inside the blob */
.blog-single-content .osx-prose blockquote.wp-block-quote::after{
  content: "“";
  position: absolute;
  left: 40px;
  top: 36px;
  font-size: 44px;
  line-height: 1;
  color: rgba(255,255,255,.95);
  font-family: Georgia, "Times New Roman", serif;
}

/* Push text right so it doesn’t collide with the icon */
.blog-single-content .osx-prose blockquote.wp-block-quote > *{
  margin: 0;
}
.blog-single-content .osx-prose blockquote.wp-block-quote p{
  margin: 0;
  padding-left: 78px;
  font-size: 20px;
  line-height: 1.65;
  font-style: normal; /* Aiero looks non-italic */
  color: rgba(0,0,0,.82);
}
body.dark-mode .blog-single-content .osx-prose blockquote.wp-block-quote p,
body.dark .blog-single-content .osx-prose blockquote.wp-block-quote p,
html[data-theme="dark"] .blog-single-content .osx-prose blockquote.wp-block-quote p{
  color: rgba(255,255,255,.86);
}

/* Citation / author line */
.blog-single-content .osx-prose blockquote.wp-block-quote cite,
.blog-single-content .osx-prose blockquote.wp-block-quote footer{
  display: block;
  margin-top: 16px;
  padding-left: 78px;
  font-size: 14px;
  color: rgba(0,0,0,.55);
}
body.dark-mode .blog-single-content .osx-prose blockquote.wp-block-quote cite,
body.dark .blog-single-content .osx-prose blockquote.wp-block-quote cite,
html[data-theme="dark"] .blog-single-content .osx-prose blockquote.wp-block-quote cite,
body.dark-mode .blog-single-content .osx-prose blockquote.wp-block-quote footer,
body.dark .blog-single-content .osx-prose blockquote.wp-block-quote footer,
html[data-theme="dark"] .blog-single-content .osx-prose blockquote.wp-block-quote footer{
  color: rgba(255,255,255,.62);
}

/* Mobile spacing */
@media (max-width: 575.98px){
  .blog-single-content .osx-prose blockquote.wp-block-quote{
    padding: 24px 22px;
    border-radius: 22px;
  }
  .blog-single-content .osx-prose blockquote.wp-block-quote::before{
    left: 18px;
    top: 22px;
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }
  .blog-single-content .osx-prose blockquote.wp-block-quote::after{
    left: 30px;
    top: 22px;
    font-size: 40px;
  }
  .blog-single-content .osx-prose blockquote.wp-block-quote p,
  .blog-single-content .osx-prose blockquote.wp-block-quote cite,
  .blog-single-content .osx-prose blockquote.wp-block-quote footer{
    padding-left: 64px;
  }
  .blog-single-content .osx-prose blockquote.wp-block-quote p{
    font-size: 18px;
  }
}
/* Blog video overlay: force white and ensure proper layering */
.blog-img4 {
  position: relative;
}

.blog-img4__media {
  position: relative;
  width: 100%;
}

/* Make iframe fill once injected */
.blog-img4__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* If your image is responsive */
.blog-img4__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay */
.blog-img4__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  background: rgba(0,0,0,0.35);
  pointer-events: none; /* clicks still go to the <a> */
}

/* White play button + label */
.blog-img4__play,
.blog-img4__cta {
  color: #ffffff;
}

.blog-img4__play {
  font-size: 44px;
  line-height: 1;
  text-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.blog-img4__cta {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* Once playing, hide overlay */
.js-yt-trigger.is-playing .blog-img4__overlay {
  display: none;
}
/* ================================
   Single post: make blog media full width
================================ */

/* Force the container to behave like a full-width block (theme may set max-width/inline-block) */
.blog-single-content .blog-img4 {
  width: 100% !important;
  max-width: none !important;
}

/* Make the link and media wrapper full width */
.blog-single-content .blog-img4 > a {
  display: block;
  width: 100%;
}

.blog-single-content .blog-img4__media {
  width: 100%;
  display: block;
}

/* Ensure images aren’t “thumbnail sized” */
.blog-single-content .blog-img4__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* When video is injected, give the container a 16:9 height and let iframe fill it */
.blog-single-content a.js-yt-trigger.is-playing .blog-img4__media {
  aspect-ratio: 16 / 9;
  background: #000;
}

.blog-single-content a.js-yt-trigger.is-playing .blog-img4__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .blog-single-content a.js-yt-trigger.is-playing .blog-img4__media {
    position: relative;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
  }
  .blog-single-content a.js-yt-trigger.is-playing .blog-img4__media iframe {
    position: absolute;
    inset: 0;
  }
}


/* ============================
   BLOG VIDEO / IMAGE CARD FIX
   - Removes grey gap on mobile/tablet
   - Keeps Aiero overlay + meta styling intact
   ============================ */

.blog-img4 { position: relative; }

.blog-img4 > a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Make the media fill the entire card height */
.blog-img4__media {
  position: absolute;
  inset: 0;
}

.blog-img4__media img,
.blog-img4__media iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* Ensure overlay sits above the media */
.blog-img4__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Ensure the date badge sits above everything */
.blog-img4 .blog-meta4 {
  position: absolute;
  z-index: 4;
}

/* When video is playing, hide the overlay prompt */
a.js-yt-trigger.is-playing .blog-img4__overlay {
  display: none;
}




/* ================================
   FIX: Blog media grey space + badge position
   ================================ */

.blog-img4{
  position: relative;
}

/* Ensure the clickable area doesn't create extra height or show a background slab */
.blog-img4__link{
  display:block;
  background: transparent !important;
}

/* Force a consistent media box (prevents grey slab on mobile/tablet) */
.blog-img4__media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 28px; /* keep your rounded look */
  background: transparent !important;
}

/* Make image/iframe fill the media box */
.blog-img4__media > img,
.blog-img4__media > iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
}

/* Keep overlay aligned to media, not affecting layout */
.blog-img4__overlay{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  pointer-events:none;
}

/* Badge: overlay it, don't let it push height */
.blog-meta4{
  position:absolute;
  left: 18px;
  bottom: 18px;
  z-index: 5;
}



/* === FIX: blog single media grey block + keep badge positioned correctly === */
.blog-single-content .blog-img4 {
  position: relative;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.blog-single-content .blog-img4 > a {
  display: block;
  position: relative;
}

/* Give the media a stable height everywhere (prevents "grey space" on mobile) */
.blog-single-content .blog-img4__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: inherit;
}

/* Make both the image and injected iframe fill the media box */
.blog-single-content .blog-img4__media > img,
.blog-single-content .blog-img4__media > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Ensure overlay sits above media */
.blog-single-content .blog-img4__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Ensure badge sits above everything and doesn't affect layout flow */
.blog-single-content .blog-img4 > .blog-meta4 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 3;
}
/* ===== Blog video/card: lock meta badge into the dent ===== */

/* Ensure the card is the positioning context */
.blog-img4 {
  position: relative;
}

/* Make the <a> fill the card so absolute positioning behaves */
.blog-img4 > a {
  display: block;
  position: relative;
}

/* Pin the meta into the dent (bottom-left inside the card) */
.blog-img4 > a .blog-meta4 {
  position: absolute !important;
  left: 22px !important;     /* nudge into dent */
  bottom: 22px !important;   /* nudge up into dent */
  z-index: 30 !important;

  /* keep it compact + readable */
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  /* if theme is doing weird sizing */
  height: auto !important;
  width: auto !important;
}

/* Mobile: slightly different offset so it still sits in the dent */
@media (max-width: 767.98px) {
  .blog-img4 > a .blog-meta4 {
    left: 16px !important;
    bottom: 16px !important;
  }
}


/* === Fix: date badge was behind the white dent === */
.blog-img4{
  position: relative;
  isolation: isolate; /* creates a clean stacking context */
}

/* make sure the clickable area doesn’t create weird stacking */
.blog-img4 > a{
  display:block;
  position:relative;
  z-index: 1;
}

/* the dent is usually ::before/::after on the card/link in Aiero-style themes */
.blog-img4::before,
.blog-img4::after,
.blog-img4 > a::before,
.blog-img4 > a::after{
  z-index: 2 !important; /* keep dent above image, but below meta */
}

/* FORCE meta above dent */
.blog-img4 .blog-meta4{
  position:absolute !important;
  left: 22px !important;
  bottom: 22px !important;
  z-index: 9999 !important;   /* above dent */
  margin: 0 !important;
  pointer-events: none;       /* don’t break the click-to-play */
}

/* Mobile nudge */
@media (max-width: 767.98px){
  .blog-img4 .blog-meta4{
    left: 16px !important;
    bottom: 16px !important;
  }
}

.blog-img4__note{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 6px 20px rgba(0,0,0,0.45);
  max-width: 360px;
}

.active-body .custom--fill{
  	background-color:rgba(10, 0, 139, 0.61);
}
.custom--fill{
  	height:100%;
  	width:100%;
  	border-radius:25px;
  	background-color:rgba(10, 0, 139, 0.61);
	z-index: -2;
    position: absolute;
    top: 0;
}
.custom--widget::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 2px;
    width: 212px;
    height: 222px;
    background-image: url(/wp-content/themes/osintersect/assets/images/layers/dots.png);
    z-index: 1;
}

.custom--widget--button--frame::before{
  	z-index: 1;
}
.active-body .custom--widget--button{
  	background-color:rgba(10, 0, 139, 0.61);
}
.custom--widget--button{
  	z-index: 1;
  	background-color:rgba(10, 0, 139, 0.61);
}
.strategy--content--custom{
  	top:0!important;
}
.ser--card--custom{
  padding:0 2px;
}


/* OSINTERSECT prose spacing */
.osx-prose p {
  margin: 0 0 14px;      /* space after each paragraph */
  line-height: 1.65;     /* more readable line spacing */
}

.osx-prose p:last-child {
  margin-bottom: 0;
}

/* Headings should breathe too */
.osx-prose h2,
.osx-prose h3,
.osx-prose h4 {
  margin: 26px 0 12px;
}

/* Optional: if you use lists/quotes in prose */
.osx-prose ul,
.osx-prose ol,
.osx-prose blockquote {
  margin: 0 0 16px;
}

.osx-prose p { margin-bottom: 14px !important; line-height: 1.65; }

/* CF7 submit button - contact section (base + hover) */
.contact-sec .wpcf7 input.wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;

  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;

  cursor: pointer;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Hover/focus: invert */
.contact-sec .wpcf7 input.wpcf7-submit:hover,
.contact-sec .wpcf7 input.wpcf7-submit:focus-visible {
  background: #ffffff !important;
  color: #0b1020 !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
  outline: none;
}

.contact-sec .wpcf7 input.wpcf7-submit:active {
  transform: translateY(0);
}
/* Hide CF7's native submit so only the theme button shows */
#contact .wpcf7 .os-cf7-hidden-submit{
  display:none !important;
}