:root{
  --pf-border: rgba(255,255,255,.10);
  --pf-surface: rgba(255,255,255,.06);
  --pf-text: rgba(255,255,255,.94);
  --pf-muted: rgba(255,255,255,.72);
  --pf-accent1: rgba(153,29,255,1);
  --pf-accent2: rgba(0,209,255,1);
  --portfolio-default-img: url("../img/product/GoMeet-Complete-Social-Dating-Mobile-App.png");
  --pf-hero-grad:
    radial-gradient(900px circle at 18% 8%, rgba(153,29,255,.55), transparent 55%),
    radial-gradient(900px circle at 85% 18%, rgba(0,209,255,.22), transparent 55%),
    linear-gradient(135deg, rgba(153,29,255,.98), rgba(70,0,190,.92));
}

.portfolio-grid{ margin-top: 26px; row-gap: 18px; }

.portfolio-card{
  position: relative;
  display:block;
  border-radius: 20px;
  border: 1px solid var(--pf-border);
  overflow: hidden;
  background: linear-gradient(180deg, var(--pf-surface), rgba(0,0,0,.12));
  box-shadow: 0 16px 44px rgba(0,0,0,.44);
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  text-decoration: none;
  color: inherit;
}

.portfolio-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(153,29,255,.70), rgba(0,209,255,.30), rgba(255,255,255,.10));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .42;
  pointer-events:none;
}

.portfolio-card.is-featured{
  border-color: rgba(153,29,255,.28);
  box-shadow: 0 18px 58px rgba(0,0,0,.50), 0 0 0 1px rgba(153,29,255,.12);
}

.portfolio-card:hover{
  transform: translateY(-2px);
  border-color: rgba(153,29,255,.32);
  box-shadow: 0 20px 62px rgba(0,0,0,.52), 0 0 0 1px rgba(153,29,255,.10);
}

.portfolio-card:focus-visible{
  outline: none;
  border-color: rgba(0,209,255,.35);
  box-shadow: 0 20px 62px rgba(0,0,0,.52), 0 0 0 4px rgba(0,209,255,.12);
}

.portfolio-media{
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--pf-hero-grad);
  --pf-img: var(--portfolio-default-img);
}

.portfolio-media--social-dating{ --pf-img: url("../img/product/GoMeet-Complete-Social-Dating-Mobile-App.png"); }
.portfolio-media--car-rental{ --pf-img: url("../img/product/CarLink-Car-Rental-Booking-App.png"); }
.portfolio-media--bus-multi{ --pf-img: url("../img/product/Prozigzag-Online-Multi-Vendor-Bus-Ticket-Booking-App.png"); }
.portfolio-media--bus-single{ --pf-img: url("../img/product/Zigzag-Bus-Ticket-Booking-App.png"); }
.portfolio-media--laundry-multi{ --pf-img: url("../img/product/FastLaundry-Laundry-Booking-App.png"); }
.portfolio-media--donation{ --pf-img: url("../img/product/GoFund-Donation-Crowdfunding-Charity-Fundraising.png"); }
.portfolio-media--pet{ --pf-img: url("../img/product/PetHome-Pet-Services-App.png"); }
.portfolio-media--truck{ --pf-img: url("../img/product/Movers-Truck-Booking-Logistics-Transport-App.jpg"); }
.portfolio-media--milk-sub{ --pf-img: url("../img/product/Milkyway-Milk-Subscription-App.png"); }
.portfolio-media--ticket-multi{ --pf-img: url("../img/product/MagicMate-Multivendor-Ticket-Booking-App.jpg"); }
.portfolio-media--movie{ --pf-img: url("../img/product/Bookmymovie-Online-Movie-Ticket-Booking-Cinema-Ticket-Reservation-BookMyShow-Clone.png"); }
.portfolio-media--pharmacy-multi{ --pf-img: url("../img/product/pharmafast-medicine-delivery-app.jpg"); }
.portfolio-media--doctor{ --pf-img: url("../img/product/drmedico.webp"); }
.portfolio-media--realestate{ --pf-img: url("../img/product/go-property-main.jpg"); }
.portfolio-media--classified{ --pf-img: url("../img/sellify-classified-ads-development-customer-app.png"); }
.portfolio-media--ecommerce{ --pf-img: url("../img/ecommerce-app-development-customer-app.png"); }
.portfolio-media--packers{ --pf-img: url("../img/product/pocket-porter.webp"); }
.portfolio-media--courier{ --pf-img: url("../img/product/pocket-porter.jpg"); }
.portfolio-media--deliveryking{ --pf-img: url("../img/product/deliveryking-multivendor.webp"); }
.portfolio-media--food{ --pf-img: url("../img/product/swiggy-clone-restaurant-delivery-app.webp"); }
.portfolio-media--service{ --pf-img: url("../img/product/ondemandservice-uclap.webp"); }
.portfolio-media--taxi{ --pf-img: url("../img/product/taxi-booking-app.png"); }
.portfolio-media--taxi-solution{ --pf-img: url("../img/product/ZippyGo-Taxi-Booking-Solution-Bidding-System-InDrive-Rapido-Clone.png"); }
.portfolio-media--ridesharing{ --pf-img: url("../img/carpooling-app-development-company-app.png"); }
.portfolio-media--garage{ --pf-img: url("../img/gomechnical-mechanic-service-app-garage-app.png"); }
.portfolio-media--tiffin{ --pf-img: url("../img/product/tiffin-delivery-service-app.png"); }
.portfolio-media--multi-delivery{ --pf-img: url("../img/product/multiveggi-multivendor.webp"); }
.portfolio-media--grocery{ --pf-img: url("../img/product/freshfastgrocery.webp"); }
.portfolio-media--milk{ --pf-img: url("../img/product/milk-delivery-app-dailymilk.webp"); }
.portfolio-media--meat{ --pf-img: url("../img/product/fishandmeat.webp"); }
.portfolio-media--medicine{ --pf-img: url("../img/product/drmedico.webp"); }

.portfolio-media:before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--pf-img);
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.1) contrast(1.05);
  transform: scale(1.18);
  opacity: .48;
  pointer-events:none;
  z-index: 0;
}

.portfolio-media:after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 11.93%, rgb(0 0 0 / 76%) 100%);
  z-index: 1;
  pointer-events: none;
}

.portfolio-media img{
  position: relative;
  z-index: 0;
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
  display:block;
  transform: scale(1);
  filter: saturate(1.05) contrast(1.05);
  transition: transform .28s ease, filter .28s ease;
}

.portfolio-card:hover .portfolio-media img{
  transform: scale(1.02);
  filter: saturate(1.10) contrast(1.08);
}

.portfolio-featured{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 88, 0, .92);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.portfolio-overlay{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  pointer-events:none;
}

.portfolio-headline{
  margin:0;
  color: rgba(255,255,255,.96);
  font-weight: 900;
  letter-spacing: -.4px;
  font-size: 34px;
  line-height: 1.05;
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.portfolio-sub{
  margin: 12px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.35;
  /* max-width: 40ch; */
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.portfolio-footer{
  background: #ffffff;
  color: #1a1026;
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  position: relative;
  z-index: 2;
  opacity: 1;
  mix-blend-mode: normal;
}

.portfolio-footer-title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.portfolio-footer-cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: rgba(26,16,38,.60);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.portfolio-plus{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(26,16,38,.06);
  color: rgba(26,16,38,.66);
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
}

@media (max-width: 991.98px){
  .portfolio-headline{ font-size: 28px; }
}

@media (max-width: 575.98px){
  .portfolio-headline{ font-size: 24px; }
  .portfolio-footer-title{ font-size: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .portfolio-card,
  .portfolio-media img{
    transition: none !important;
  }
  .portfolio-card:hover{
    transform: none;
  }
  .portfolio-card:hover .portfolio-media img{
    transform: none;
  }
}