/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 30 2026 | 11:22:55 */
/* ------Home Page------ */
@media screen and (min-width:1400px){
.for-wrapping .elementor-icon-list-item a{
text-wrap:nowrap;
}
}
.for-cursor{
cursor:pointer;
}
.for-hover .elementor-button .elementor-button-content-wrapper {
display:flex;
align-items:center;
}
.for-hover.view-more .elementor-button .elementor-button-content-wrapper .fh-icon-wrap{
width:20px !important;
height:20px !important;
	margin-top:1px !important;
}
.for-hover.hover-tab-btn .elementor-button .elementor-button-content-wrapper .fh-icon-wrap{
width:18px !important;
height:18px !important;
margin-top:-2px;
}
.for-hover .elementor-button .elementor-button-content-wrapper .fh-icon-wrap{
width:19px !important;
height:19px !important;
margin-top:-2px;
}
/* .for-19 .elementor-button .fh-icon-wrap{
width:19px !important;
height:19px !important;
} */
.my-footer .e-con-inner{
max-width:1320px !important;
}
/* .normal-btn .fh-icon-wrap{
width:16px !important;
height:16px !important;
} */
.view-more svg {
width:18px !important;
height:18px !important;
}
.footer-nav .elementor-icon-list-item{
list-style:none !important;
}
.li-style-none ul{
padding:0px !important;
}
.li-style-none ul li a{
display:flex;
align-items:center;
gap:8px;
}
.li-style-none ul li{
list-style:none !important;
}
.footer-nav ul{
padding:0px !important;
}
.footer-nav .elementor-icon-list-item a{
display:flex;
flex-direction:row-reverse;
justify-content:start;
align-items:center;
gap:8px;
width:100%;
}
.footer-nav .elementor-icon-list-item a .elementor-icon-list-text{
padding:0px;
}
.footer-nav .elementor-icon-list-item a .fh-icon-wrap{
width:30px !important;
height:20px !important;
}
.footer-nav .elementor-icon-list-item a .fh-icon-wrap svg{
width:12px !important;
height:15px !important;
}
.footer-nav .elementor-icon-list-item a .fh-icon-wrap svg{
width:10px !important;
height:10px !important;
}
.for-boder ul li{
position:relative;
}
.for-boder ul{
display:flex;
}
.inline ul li.elementor-icon-list-item{
width:fit-content;
}
.for-boder ul li:nth-child(2)::after {
    content: "";
    position: absolute !important;
    left: -17px !important;
    top: 0;
    width: 2px !important;
    height: 100% !important;
    background: #FFF !important;
}
.home-wcu-logo-carousel{
    overflow:hidden;
    width:100%;
    position:relative;
}

.home-wcu-logo-carousel .gallery{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:0px;
    width:max-content;
    will-change:transform;
}
.home-wcu-logo-carousel .elementor-image-gallery{
position:relative;
}
.home-wcu-logo-carousel .elementor-image-gallery::before{
left: 0px;
    background: linear-gradient(to right, rgba(10, 36, 64, 1), rgba(10, 36, 64, 0));
}
.home-wcu-logo-carousel .elementor-image-gallery::after{
    right: 0;
    background: linear-gradient(to left, rgba(10, 36, 64, 1), rgba(10, 36, 64, 0));
}
.home-wcu-logo-carousel .elementor-image-gallery::before,
.home-wcu-logo-carousel .elementor-image-gallery::after{
    content: "";
    position: absolute;
    top: 0;
    width: 270px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}
.home-wcu-logo-carousel .gallery-item{
    margin:0 !important;
}
.home-wcu-logo-carousel .gallery-item img{
    margin:0px;
	object-fit: contain;
    opacity: 0.6;
    display: block;
    transition: 0.3s ease;
	width:160px;
	height:auto;
}
/* -----Hovers-----*/

/* =============================================================================
   HOVER-BUTTON.CSS
   Reusable "Cuberto / Lusion / Obys" style icon-swap hover animation.
   Works on any button (Elementor or plain HTML) carrying the ".for-hover"
   class. All structural markup (wrappers, cloned SVG) is injected by
   hover-button.js — this stylesheet only styles the injected structure.
   ============================================================================= */

/* -----------------------------------------------------------------------
   1. Animation tokens
   Centralised so timing/easing can be tuned in one place. The easing below
   (expo-style) is the same family of curve used across premium sites for
   "slide-and-settle" icon transitions — fast start, soft landing.
   ----------------------------------------------------------------------- */
:root {
  --fh-duration: 0.6s;
  --fh-easing: cubic-bezier(0.76, 0, 0.24, 1);
}

/* -----------------------------------------------------------------------
   2. Host button
   No forced layout styles — we must not fight the user's / Elementor's
   existing button design. Only safe, non-destructive touches here.
   ----------------------------------------------------------------------- */
.for-hover {
  -webkit-tap-highlight-color: transparent;
}

/* -----------------------------------------------------------------------
   3. Icon wrapper ("mask")
   This is either:
     a) the pre-existing icon container reused in place (e.g.
        <span class="elementor-button-icon">), or
     b) a fresh <span> injected by JS at the exact spot the SVG used to be.

   Its width/height are locked (inline style, set by JS) to the icon's
   original rendered size, so removing the SVG from normal flow (both
   copies become position:absolute) causes ZERO layout shift.
   overflow:hidden is what makes a translated icon "disappear" — no
   opacity tricks needed, so there is no flashing/flicker.
   ----------------------------------------------------------------------- */
.fh-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
  /* width / height are set inline by JS per-instance */
}

/* -----------------------------------------------------------------------
   4. Individual icon slot (original + clone)
   Both slots are absolutely positioned, stacked, and always present in
   the DOM. We never add/remove nodes on hover — only a class toggle on
   the wrapper — which is what makes rapid in/out hovering perfectly
   smooth: the browser simply reverses the in-flight transition from
   whatever transform value it is currently at.
   ----------------------------------------------------------------------- */
.fh-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* GPU-accelerated transform only — never animate top/left/margin */
  transform: translate3d(0, 0, 0);
  transition: transform var(--fh-duration) var(--fh-easing);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  pointer-events: none; /* purely decorative layer */
}

/* Preserve intrinsic icon size/color: we only size the SVG to fill its
   slot, we never touch fill/stroke so original coloring (currentColor,
   explicit fill, gradients, etc.) is fully preserved. */
.fh-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* -----------------------------------------------------------------------
   5. Travel direction (diagonal, matches an up-right ↗ arrow icon)
   Instead of a plain vertical slide, the icon travels along the SAME
   diagonal the arrowhead points to — this is the exact "Cuberto style"
   detail: the exiting icon exits toward the top-right corner, and the
   incoming icon enters from the bottom-left corner, so the motion reads
   as a continuation of the arrow's own direction rather than a generic
   up/down swap.

   Exposed as CSS custom properties so a different icon (e.g. an arrow
   pointing the other way, or a non-directional icon that should just
   move straight up) can override the travel path per-instance without
   touching the JS — see "Per-icon direction override" below.
   ----------------------------------------------------------------------- */
.fh-icon-wrap {
  --fh-exit-x: 100%;   /* outgoing icon exits toward the right... */
  --fh-exit-y: -100%;  /* ...and up (top-right corner) */
  --fh-enter-x: -100%; /* incoming icon starts from the left... */
  --fh-enter-y: 100%;  /* ...and below (bottom-left corner) */
}

/* -----------------------------------------------------------------------
   6. Resting state (mouse not hovering)
   - Original (a) sits centered / visible.
   - Clone (b) is parked off-screen at the bottom-left corner, invisible
     (clipped by overflow:hidden on the wrapper) — ready to travel in
     along the diagonal on hover.
   ----------------------------------------------------------------------- */
.fh-icon-a { transform: translate3d(0, 0, 0); }
.fh-icon-b { transform: translate3d(var(--fh-enter-x), var(--fh-enter-y), 0); }

/* -----------------------------------------------------------------------
   7. Hover state
   Toggled purely via a single class on the wrapper (".is-hover").
   - Original (a) slides diagonally toward the top-right and out of view.
   - Clone (b) slides diagonally in from the bottom-left into center.
   ----------------------------------------------------------------------- */
.fh-icon-wrap.is-hover .fh-icon-a { transform: translate3d(var(--fh-exit-x), var(--fh-exit-y), 0); }
.fh-icon-wrap.is-hover .fh-icon-b { transform: translate3d(0, 0, 0); }

/* -----------------------------------------------------------------------
   8. Per-icon direction override (optional)
   If some buttons use an icon that does NOT point up-right (e.g. a
   down-left arrow, or a non-directional icon that should just travel
   straight up), override the custom properties on that specific wrapper.
   Easiest hook: add a modifier class to the button itself, e.g.
   class="for-hover fh-dir-up", and define it here:

   .fh-dir-up .fh-icon-wrap {
     --fh-exit-x: 0;    --fh-exit-y: -100%;
     --fh-enter-x: 0;   --fh-enter-y: 100%;
   }
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   9. Optional variant: "reveal on hover"
   Default ".for-hover" behavior SWAPS two identical icons (always
   something visible, continuous motion) — great for buttons.

   Some elements (e.g. a footer icon-list) instead want the icon fully
   HIDDEN at rest, only appearing while hovering — using the EXACT same
   reversible slide mechanics as the default swap (just applied to ONE
   icon transitioning between "off-screen" and "centered" instead of two
   icons swapping between two visible states). Because it's a plain
   two-state class toggle — identical in spirit to the default button
   animation — leaving always reverses smoothly back out through the same
   path it entered from. No extra states, no timers, no edge cases.

   Opt-in only: add this class alongside ".for-hover" on the SAME element
   that already carries it — e.g.
     class="footer-nav for-hover fh-reveal-on-hover"
   This changes nothing for any ".for-hover" element that does NOT also
   carry ".fh-reveal-on-hover", so every existing button keeps its
   current swap animation exactly as-is.

   IMPORTANT: both classes must sit on the SAME element. If ".for-hover"
   is on a parent (e.g. the <ul>) and ".fh-reveal-on-hover" is on a
   child, the ".fh-reveal-on-hover .fh-icon-b" etc. selectors below still
   match fine (they're descendant selectors) — but double check your
   markup matches this expectation if the reveal styling isn't applying.
   ----------------------------------------------------------------------- */
.fh-reveal-on-hover .fh-icon-b {
  display: none; /* duplicate icon isn't needed for a simple reveal */
}

.fh-reveal-on-hover .fh-icon-a {
  /* hidden at rest — parked off-screen at the same corner the clone
     would have entered from in the default animation, so it still
     matches the arrow's own diagonal */
  transform: translate3d(var(--fh-enter-x), var(--fh-enter-y), 0);
}

.fh-reveal-on-hover .fh-icon-wrap.is-hover .fh-icon-a {
  /* slides in to center only while hovering; removing ".is-hover" on
     mouse-leave simply reverses this same transition back to the rule
     above — smooth, single path, no popping. */
  transform: translate3d(0, 0, 0);
}

/* -----------------------------------------------------------------------
   10. Variant: "inline link arrow" (fast diagonal reveal for text links)
   For small ↗ arrows sitting right after TEXT LINKS (e.g. footer link
   lists), as opposed to big standalone icon buttons. SAME diagonal
   travel direction as the default (bottom-left -> center, matching the
   arrow's own ↗ direction) — only the speed and icon size are tuned
   down, since a small inline arrow next to running text reads better
   fast/snappy than on the slower 0.6s timing used for big buttons.

   Opt-in only: add this class ALONGSIDE ".for-hover" and
   ".fh-reveal-on-hover" on the same link, e.g.:
     <a class="for-hover fh-reveal-on-hover fh-inline-link" href="#">
       AI MVP Development
       <span><svg>...small arrow...</svg></span>
     </a>
   Every plain ".for-hover" button, and every ".fh-reveal-on-hover"
   element WITHOUT this class, keeps its exact current animation.
   Direction (--fh-enter-x / --fh-enter-y) is intentionally NOT
   overridden here, so it inherits the same diagonal as every other
   ".fh-icon-wrap" — only --fh-duration and the icon's own size differ.
   ----------------------------------------------------------------------- */
.fh-inline-link {
  /* Cascades down as a CSS custom property, so this faster timing
     applies only inside THIS link — the global --fh-duration on :root,
     and every other button's speed, is untouched. */
  --fh-duration: 0.28s;
}

.fh-inline-link .fh-icon {
  transition-timing-function: ease-out;
}

/* Keep the arrow visually small and vertically centered with the text,
   regardless of whatever size the source svg happens to be. */
.fh-inline-link .fh-icon-wrap {
  margin-left: 4px;
}

.fh-inline-link .fh-icon-a svg {
  width: 14px;
  height: 14px;
}

/* -----------------------------------------------------------------------
   11. Reduced motion support
   Respect user preference — swap instantly instead of animating.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fh-icon {
    transition: none !important;
  }
}
/* -----Hover css end ------ */
body a{
text-decoration:none !important;
}
.card-slider .elementor-swiper-button{
display:none !important;
}
/* css for blog cards section start */
#feature-recent-posts{
  background:var(--e-global-color-secondary);
  padding:60px 24px;
	font-family:var(--e-global-typography-primary-font-family);
}

#feature-recent-posts,
#feature-recent-posts *,
#feature-recent-posts *::before,
#feature-recent-posts *::after{
  box-sizing:border-box;
}

#feature-recent-posts .post-highlight__inner{
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:24px;
  align-items:stretch;
}

/* ===============================
   Main Featured Post
================================ */

#feature-recent-posts .post-main{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  min-height:620px;
  isolation:isolate;
}

#feature-recent-posts .post-main__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

#feature-recent-posts .post-main__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding:24px;
  background:linear-gradient(
    180deg,
    rgba(6,8,20,.15) 0%,
    rgba(6,8,20,.05) 30%,
    rgba(4,6,16,.55) 65%,
    rgba(3,4,12,.92) 100%
  );
}

#feature-recent-posts .post-main__top{
  display:flex;
  align-items:center;
  gap:10px;
}

#feature-recent-posts .post-main__badge{
  font-family:var(--e-global-typography-primary-font-family);
    font-size: var(--e-global-typography-42d7a8e-font-size);
    font-weight: var(--e-global-typography-42d7a8e-font-weight);
    line-height: var(--e-global-typography-42d7a8e-line-height);
    color: #D9D9D9;
	background:var(--e-global-color-e176a03);
  border-radius:100px;
  letter-spacing:.01em;
	padding:4px 16px;
}

#feature-recent-posts .post-main__read{
font-family:var(--e-global-typography-primary-font-family);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    color:#F4F4F5;
}

#feature-recent-posts .post-main__content{
  max-width:620px;
}

#feature-recent-posts .post-main__title{
  font-family:var(--e-global-typography-primary-font-family);
  color:var(--e-global-color-secondary);
   font-size:var(--e-global-typography-text-font-size);
   font-weight:var(--e-global-typography-text-font-weight);
   line-height:var(--e-global-typography-text-line-height);
   margin:30px 0px 20px 0px;
  letter-spacing:-.01em;
}

#feature-recent-posts .post-main__desc{
  color:#F4F4F5;
font-size:var(--e-global-typography-42d7a8e-font-size);
font-weight:var(--e-global-typography-42d7a8e-font-weight);
line-height:var( --e-global-typography-42d7a8e-line-height);
font-family:var(--e-global-typography-9191fca-font-family);
  margin:0px 0px 20px 0px;
}

#feature-recent-posts .post-main__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

#feature-recent-posts .post-main__author{
  display:flex;
  flex-direction:column;
  gap:2px;
}

#feature-recent-posts .post-main__author-name{
 color:var(--e-global-color-secondary);
font-size:var(--e-global-typography-42d7a8e-font-size);
font-weight:var(--e-global-typography-e88e1ff-font-weight);
line-height:var( --e-global-typography-42d7a8e-line-height);
font-family:var(--e-global-typography-9191fca-font-family);
}

#feature-recent-posts .post-main__author-role{
  color:#E4E4E7;
  font-size:12px;
  font-weight:var(--e-global-typography-42d7a8e-font-weight);
}

#feature-recent-posts .post-main__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--e-global-color-secondary);
  color:var(--e-global-color-primary);
  font-size:var(--e-global-typography-a3b3a39-font-size);
   font-weight:var(--e-global-typography-a3b3a39-font-weight);
   font-family:var(--e-global-typography-42d7a8e-font-family);
  padding:8px 16px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
}

/* #feature-recent-posts .post-main__cta:hover{
  background:#f0f0f0;
  transform:translateY(-1px);
} */

#feature-recent-posts .post-main__cta svg{
  flex-shrink:0;
}

/* ===============================
   Grid
================================ */

#feature-recent-posts .post-highlight__grid{
  overflow:hidden;
  position:relative;
}

#feature-recent-posts .post-highlight__grid-track{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;
  gap:20px;
  height:100%;
}

#feature-recent-posts .post-card{
  display:flex;
  flex-direction:column;
}

#feature-recent-posts .post-card__media{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/3;
  margin-bottom:14px;
}

#feature-recent-posts .post-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#feature-recent-posts .post-card__badge{
  position:absolute;
  top:12px;
  left:12px;
	border:1px solid rgba(255, 255, 255, 0.6);
  background:transparent;
  backdrop-filter:blur(10px);
  color:var(--e-global-color-secondary);
  font-size:10px;
  font-weight:600;
  padding:5px 12px;
  border-radius:100px;
}

#feature-recent-posts .post-card__body{
  display:flex;
  flex-direction:column;
  gap:6px;
}

#feature-recent-posts .post-card__eyebrow{
  color:var(--e-global-color-text);
  font-size:var(--e-global-typography-42d7a8e-font-size);
   font-weight:var(--e-global-typography-42d7a8e-font-weight);
   line-height:var(--e-global-typography-42d7a8e-line-height);
   font-family:var(--e-global-typography-9191fca-font-family);
}

#feature-recent-posts .post-card__title{
  color:var(--e-global-color-primary);
  font-size:var(--e-global-typography-accent-font-size);
   font-weight:var(--e-global-typography-accent-font-weight);
   font-family:var(--e-global-typography-e88e1ff-font-family);
line-height:var(--e-global-typography-primary-line-height);
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
	margin:0px;
}

#feature-recent-posts .post-card__meta{
  margin:4px 0 0;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
	font-weight:400;
	color:#3F3F46;
}

#feature-recent-posts .post-card__author{
  color:#27272A;
     font-size: var(--e-global-typography-42d7a8e-font-size);
    font-weight: var(--e-global-typography-5415a87-font-weight);
    line-height: var(--e-global-typography-5415a87-line-height);
}

#feature-recent-posts .post-card__role{
 font-size:12px;
	font-weight:400;
	color:#3F3F46;
}




.wcu-blogsec{
display:grid;
grid-template-columns:6fr 6fr;
grid-gap:20px;
	font-family:var(--e-global-typography-42d7a8e-font-family);
}
.custom-blog-layout{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:24px;
    align-items:start;
}

.wcu-blogsec .featured-post{
    position:relative;
}
.wcu-blogsec .featured-post .featured-card:hover img{
    transform: scale(1.05);
}

.wcu-blogsec .featured-image{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:8px;
    text-decoration:none;
}
.wcu-blogsec .featured-image:hover img{
    transform: scale(1.05);
}
.wcu-blogsec .featured-image img:hover{
transform: scale(1.05);
}

.wcu-blogsec .featured-image img{
    width:100%;
    height:700px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.wcu-blogsec .featured-image:hover img{
    transform:scale(1.05);
}

.wcu-blogsec .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.1));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:32px;
	border-radius:8px;
}
.wcu-blogsec .featured-top-meta{
display:flex;
align-items:center;
	gap:10px;
}
.wcu-blogsec .category{
    color: var(--e-global-color-secondary);
    font-family: var(--e-global-typography-9191fca-font-family);
    font-size: var(--e-global-typography-42d7a8e-font-size);
    font-weight: var(--e-global-typography-42d7a8e-font-weight);
    line-height: var(--e-global-typography-42d7a8e-line-height);
	background: var(--e-global-color-e176a03);
    border-radius: 100px;
    letter-spacing: .01em;
    padding: 4px 16px;
}
.wcu-blogsec .featured-post .read-time{
font-family: var(--e-global-typography-primary-font-family);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    color: #F4F4F5;
}
.wcu-blogsec .recent-posts .read-time{
font-size:var(--e-global-typography-42d7a8e-font-size);
font-weight:var(--e-global-typography-42d7a8e-font-weight);
font-family:var(--e-global-typography-primary-font-family);
color:var(--e-global-color-text);
}
.wcu-blogsec .overlay h2{
    font-family: var(--e-global-typography-primary-font-family);
    color: var(--e-global-color-secondary);
    font-weight: var(--e-global-typography-primary-font-weight);
    font-size: var(--e-global-typography-text-font-size);
    line-height: var(--e-global-typography-primary-line-height);
    margin: 24px 0px 8px 0px;
	max-width:400px;
}
.wcu-blogsec .overlay h2 a{
    font-family: var(--e-global-typography-primary-font-family);
    color: var(--e-global-color-secondary);
    font-weight: var(--e-global-typography-primary-font-weight);
    font-size: var(--e-global-typography-text-font-size);
    line-height: var(--e-global-typography-primary-line-height);
}

.wcu-blogsec .featured-post .overlay p{
    color: #F4F4F5;
    font-family: var(--e-global-typography-9191fca-font-family);
    font-size: var(--e-global-typography-42d7a8e-font-size);
    font-weight: var(--e-global-typography-42d7a8e-font-weight);
    line-height:21px;
	margin-bottom:24px;
}
.wcu-blogsec .featured-footer{
    display: flex;
    justify-content: space-between;
}
.wcu-blogsec .author-meta{
    display: flex;
    flex-direction: column;
}
.wcu-blogsec .author-meta .author-name{
color: var(--e-global-color-secondary);
    font-size: var(--e-global-typography-42d7a8e-font-size);
    font-weight: var(--e-global-typography-e88e1ff-font-weight);
    line-height: var(--e-global-typography-42d7a8e-line-height);
    font-family: var(--e-global-typography-9191fca-font-family);
} 
.wcu-blogsec .author-meta .author-role{
color: #E4E4E7;
    font-size: 12px;
    font-weight: var(--e-global-typography-42d7a8e-font-weight);
}
.wcu-blogsec .read-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--e-global-color-secondary);
    color: var(--e-global-color-primary);
    font-size: var(--e-global-typography-a3b3a39-font-size);
    font-weight: var(--e-global-typography-a3b3a39-font-weight);
    font-family: var(--e-global-typography-42d7a8e-font-family);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
	transition:background-color 0.2s ease-in;
}
.wcu-blogsec .read-btn:hover{
    background: #FAFAFA;
 }
/* .wcu-blogsec .read-btn::after{
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background: url("https://staging.zeeframes.com/wp-content/uploads/2026/07/Vector-7.svg") no-repeat;
    background-size: contain;
    transition: transform .3s ease;
	margin:0px;
} */


.wcu-blogsec .recent-posts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.wcu-blogsec .featured-post .category{
    color: #F4F4F5;
    font-family: var(--e-global-typography-9191fca-font-family);
    font-size: var(--e-global-typography-42d7a8e-font-size);
    font-weight: var(--e-global-typography-42d7a8e-font-weight);
    line-height: var(--e-global-typography-42d7a8e-line-height);
}
.wcu-blogsec .recent-posts .category{
    position: absolute;
    top: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    backdrop-filter: blur(10px);
    color: var(--e-global-color-secondary);
    font-size: 10px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 100px;
	margin-left:10px;
}
.wcu-blogsec .recent-item{
    display:flex;
    flex-direction:column;
	position:relative;
}

.wcu-blogsec .thumb{
    display:block;
    overflow:hidden;
    border-radius:8px;
}

.wcu-blogsec .thumb img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.wcu-blogsec .thumb:hover img{
    transform:scale(1.05);
}

.wcu-blogsec .content{
    padding-top:16px;
}

.wcu-blogsec .content h3{
    margin:8px 0 0;
    line-height:var(--e-global-typography-primary-line-height);
}
.wcu-blogsec .content h3 a{
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-e88e1ff-font-family);
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    line-height: var(--e-global-typography-primary-line-height);
    text-decoration: none;
	margin-bottom:16px;
}
.wcu-blogsec .content h3 a:hover{
    color:var(--e-global-color-e176a03);
}
.wcu-blogsec .recent-posts .post-meta{
margin-top:8px;
display:flex;
flex-direction:column;
}
.wcu-blogsec .recent-posts  .author-name{
    color: #27272A;
    font-size: var(--e-global-typography-42d7a8e-font-size);
    font-weight: var(--e-global-typography-5415a87-font-weight);
    line-height: var(--e-global-typography-5415a87-line-height);
}
.wcu-blogsec .recent-posts .author-role{
font-size: 12px;
    font-weight: 400;
    color: #3F3F46;
}
.form-section #form-submit-btn svg{
width:12px;
height:12px;
}
.form-section #form-submit-btn .fh-icon-wrap{
width:20px !important;
height:20px !important;
}

/* -----About us page ------ */
.post-fix{
    font-weight: 500;
    font-size: 36px;
    line-height: 43.2px;
}
.about-address-slider .elementor-swiper-button.elementor-swiper-button-next svg{
fill:none;
}
.about-address-slider .elementor-swiper-button.elementor-swiper-button-prev svg{
fill:none;
}
.for-mbl-btn {
display:none !important;
}
/* ===============================
   Tablet
================================ */
@media screen and (min-width:1399px){
	.for-img-height img{
    height:92.5% !important;
}
	.for-breaking p.elementor-image-box-description{
    width:93%;
    }
}
@media screen and (min-width:1020px) and (max-width:1390px){
	.for-img-height img{
    height:100% !important;
}
	.for-breaking p.elementor-image-box-description{
    width:100%;
    }
}
@media (max-width:1024px){

#feature-recent-posts .post-highlight__inner{
  grid-template-columns:1.5fr 1fr;
}
	.for-breaking p.elementor-image-box-description{
    width:100%;
    }

#feature-recent-posts .post-main{
  min-height:460px;
}
	.wcu-blogsec .featured-image img{
    height: 752px;
    object-fit: cover;
    object-position: center;
}
}
@media(max-width:991px){

    .custom-blog-layout{
        grid-template-columns:1fr;
    }

    .wcu-blogsec .featured-image img{
        height:450px;
    }

}


/* ===============================
   Mobile
================================ */

@media (max-width:768px){
	#feature-recent-posts .post-highlight__inner{
  grid-template-columns:1fr;
}

#feature-recent-posts{
  padding:40px 16px;
}

#feature-recent-posts .post-main{
  min-height:520px;
  border-radius:16px;
}
#feature-recent-posts .post-highlight__grid[data-slider-active] .post-highlight__grid-track{
  display:flex;
  will-change:transform;
  backface-visibility:hidden;
  touch-action:pan-y;
  user-select:none;
}

#feature-recent-posts .post-highlight__grid[data-slider-active] .post-card{
  flex-shrink:0;
  width:100%;
}
	#feature-recent-posts .post-main__content{
max-width:100%;
}
	   .wcu-blogsec{
display:grid;
grid-template-columns:1fr;
		   grid-gap:24px;
}
    .wcu-blogsec .recent-posts{
        grid-template-columns:1fr 1fr;
    }

    .wcu-blogsec .featured-image img{
        height:702px;
    }
	.card-slider .elementor-swiper-button{
display:block !important;
	font-size:40px !important;
}
	.home-wcu-logo-carousel .gallery{
    gap:0px;
 }
/* 	.slider-card-section{
    flex-direction:column;
    }
	.slider-card-section .work-cards-slider{
    width:100%;
}
	.slider-card-section .work-cards-slider .project-card{
width:100%;
} */
	.wcu-blogsec .content h3 a{
   font-size:18px;
}
}
@media screen and (max-width:500px){
	#feature-recent-posts .post-highlight__grid-track{
gap:0px;
}
	.wcu-blogsec .recent-posts{
        grid-template-columns:1fr;
    }
	.home-wcu-logo-carousel .gallery{
    gap:15px;
 }
	.wcu-blogsec .overlay{
   padding:24px;
}
	.wcu-blogsec .featured-image img{
        height:520px;
    }
	.wcu-blogsec .overlay h2{
    max-width:100%;
		margin:24px 0px 8px 0px;
		line-height:28px;
}
	.wcu-blogsec .overlay p{
    margin-bottom:24px;
   }
	.wcu-blogsec .author-meta{
    gap:6px;
    }
	.wcu-blogsec .featured-footer{
     display:flex;
	flex-direction:column;
		justify-content:start;
		gap:10px;
}
	.wcu-blogsec .featured-footer .read-btn{
width:fit-content;
}
	.post-fix{
    font-size: 32px;
    line-height: 38px;
}
	.for-mbl-btn {
    display:inline-flex !important;
	font-size:16px !important;
	margin-top:16px !important;
}
	.for-desktop-btn {
    display:none !important;
}
	.wcu-blogsec .overlay{
    padding:24px;
  }	
}
@media screen and (max-width:375px){
.wcu-blogsec .featured-footer{
    display: flex;
    flex-direction:column;
	justify-content:start;
	gap:15px;
}
	.wcu-blogsec .read-btn{
    width:fit-content;
  } 
	
}

/* css for blog cards section end */