/* JB Technologies — About Us capabilities: real-image card refresh. */
/* This stylesheet REPLACES about-service-card-images.css only. GSAP remains unchanged. */
.jb-cinema .jb-c-cap-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  background: #202329 !important;
  color: #fff !important;
  border: 1px solid rgba(217,144,60,.55) !important;
  border-radius: 19px;
  box-shadow: 0 18px 42px rgba(8,10,13,.24);
  width: 395px;
  min-height: 385px;
  height: min(58vh,485px);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .3s ease,box-shadow .3s ease;
}
.jb-cinema .jb-c-cap-card::before {
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image: var(--jb-cap-image);
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.005);
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
}
/* Override the old SVG URLs, including custom properties supplied inline in the Blade view. */
.jb-cinema .jb-c-cap-card--1::before { background-image:url('../images/about-services/website-development.webp') !important; }
.jb-cinema .jb-c-cap-card--2::before { background-image:url('../images/about-services/mobile-applications.webp') !important; }
.jb-cinema .jb-c-cap-card--3::before { background-image:url('../images/about-services/custom-software-crm.webp') !important; }
.jb-cinema .jb-c-cap-card--4::before { background-image:url('../images/about-services/ecommerce-development.webp') !important; }
.jb-cinema .jb-c-cap-card--5::before { background-image:url('../images/about-services/ecommerce-operations.webp') !important; }
.jb-cinema .jb-c-cap-card--6::before { background-image:url('../images/about-services/digital-marketing.webp') !important; }
/* Darken the *bottom* consistently for readable copy, preserve artwork near the top. */
.jb-cinema .jb-c-cap-card::after {
  content:"";
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(14,17,22,.22) 0%,
    rgba(14,17,22,.18) 24%,
    rgba(14,17,22,.68) 47%,
    rgba(14,17,22,.96) 77%,
    rgba(14,17,22,.99) 100%);
}
.jb-cinema .jb-c-cap-card>span {
  position:relative;z-index:1;display:block;
  font-family:inherit !important;font-weight:800 !important;
  font-size:clamp(45px,4vw,62px) !important;line-height:1;
  color:#edaa5e !important;background:none !important;
  padding:0 !important;text-shadow:0 2px 12px rgba(0,0,0,.38);
}
.jb-cinema .jb-c-cap-card>div {
  position:relative;z-index:1;max-width:100%;
  padding:0 !important;background:transparent !important;
}
.jb-cinema .jb-c-cap-card h3 {
  color:#fff !important;background:transparent !important;
  font-family:inherit !important;font-weight:800 !important;
  font-size:clamp(25px,2.15vw,32px) !important;
  line-height:1.15 !important;letter-spacing:-.035em;
  margin:0 0 12px !important;padding:0 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.jb-cinema .jb-c-cap-card p {
  color:#f2f0ec !important;
  font-size:15px !important;line-height:1.55 !important;
  margin:0 !important;text-shadow:0 1px 5px rgba(0,0,0,.6);
}
.jb-cinema .jb-c-cap-card a {
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px !important;font-weight:700 !important;
  color:#ffc47d !important;
  margin-top:22px !important;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;
  transition:color .2s,text-decoration-color .2s;
}
.jb-cinema .jb-c-cap-card:hover,
.jb-cinema .jb-c-cap-card:focus-within {
  border-color:#e7a153 !important;
  box-shadow:0 23px 48px rgba(8,10,13,.3);
}
.jb-cinema .jb-c-cap-card:hover::before,
.jb-cinema .jb-c-cap-card:focus-within::before {transform:scale(1.055);}
.jb-cinema .jb-c-cap-card a:hover,
.jb-cinema .jb-c-cap-card a:focus-visible {color:white !important;text-decoration-color:currentColor;}
.jb-cinema .jb-c-cap-card:focus-visible,
.jb-cinema .jb-c-cap-card a:focus-visible {outline:3px solid #e8a553;outline-offset:3px;}
@media(max-width:767px){
  .jb-cinema .jb-c-cap-card {
    width: min(88vw,395px) !important;
    min-width:0 !important;min-height:380px !important;
    height:410px !important;padding:25px !important;
  }
  .jb-cinema .jb-c-cap-card h3 {font-size:27px !important;}
  .jb-cinema .jb-c-cap-card p {font-size:14px !important;}
}
@media(prefers-reduced-motion:reduce){
  .jb-cinema .jb-c-cap-card,
  .jb-cinema .jb-c-cap-card::before {transition:none !important;transform:none !important;}
}