/* ================================================ PROJECT SHOWCASE SLIDER Save as: assets/css/project-showcase.css Link in AFTER main.css: ================================================ */ /* ── Section wrapper ── */ .bs-project-showcase-area { position: relative; width: 100%; background: #0d0d0d; overflow: hidden; } .bs-project-showcase-wrapper { position: relative; } /* ── Swiper base ── */ .bs-project-showcase-swiper { width: 100%; height: 750px; /* ◄ یہاں ڈیسک ٹاپ کے لیے ہائٹ 600px سے بڑھا کر 750px کر دی گئی ہے */ } @media (max-width: 991px) { .bs-project-showcase-swiper { height: 520px; /* ◄ ٹیبلٹ ورژن کی ہائٹ بھی تھوڑی بہتر کر دی گئی ہے */ } } @media (max-width: 575px) { .bs-project-showcase-swiper { height: 420px; /* ◄ موبائل ورژن کی ہائٹ بھی انکریز کر دی گئی ہے */ } } /* ── Each slide ── */ .bs-showcase-slide { position: relative; width: 100%; height: 100%; overflow: hidden; } /* ── Parallax Image Container ── */ .bs-showcase-bg { position: absolute; inset: 0; height: 100%; will-change: transform; } .bs-showcase-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } /* یہ پرانا کلاس بیک اپ کے لیے ہے اگر آپ امیج ڈائریکٹ استعمال کر رہے ہوں */ .bs-showcase-slide img:not(.bs-showcase-bg img) { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Overlay gradient ── */ .bs-showcase-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.22) 50%, transparent 100% ); display: flex; align-items: flex-end; padding: 48px 60px; padding-bottom: 80px; /* کنٹرولز سے ٹیکسٹ کو دور رکھنے کے لیے */ z-index: 2; transition: background 0.5s ease; } @media (max-width: 575px) { .bs-showcase-overlay { padding: 28px 24px; padding-bottom: 90px; /* موبائل پر بٹنز کے لیے نیچے سے زیادہ جگہ */ } } /* ── Slide info ── */ .bs-showcase-info { opacity: 0; transform: translateX(30px); transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.9s ease; will-change: transform, opacity; } .swiper-slide-active .bs-showcase-info { opacity: 1; transform: translateX(0); } .bs-showcase-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); padding: 5px 14px; border-radius: 2px; margin-bottom: 16px; backdrop-filter: blur(6px); } .bs-showcase-title { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 600; color: #ffffff; line-height: 1.25; margin: 0; letter-spacing: -0.01em; } /* ── Controls bar ── */ .bs-showcase-controls { position: absolute; bottom: 0; right: 0; display: flex; align-items: center; gap: 0; z-index: 10; } /* ── Counter ── */ .bs-showcase-counter { display: flex; align-items: center; gap: 10px; padding: 14px 24px; background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.08); border-left: 1px solid rgba(255,255,255,0.08); } .bs-showcase-current, .bs-showcase-total { font-size: 13px; font-weight: 500; color: #ffffff; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; min-width: 20px; display: inline-block; } .bs-showcase-total { color: rgba(255, 255, 255, 0.4); } .bs-showcase-sep { display: block; width: 28px; height: 1px; background: rgba(255, 255, 255, 0.25); } /* ── Prev / Next buttons ── */ .bs-showcase-nav { display: flex; } .bs-showcase-prev, .bs-showcase-next { width: 52px; height: 52px; border: none; outline: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ffffff; background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.08); border-left: 1px solid rgba(255,255,255,0.08); transition: background 0.25s ease, color 0.25s ease; flex-shrink: 0; } .bs-showcase-prev:hover, .bs-showcase-next:hover { background: rgba(255, 255, 255, 0.15); } /* ── Progress bar ── */ .bs-showcase-progress-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.10); z-index: 10; pointer-events: none; } .bs-showcase-progress-bar { height: 100%; width: 0%; background: #ffffff; transition: width 0.1s linear; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .bs-showcase-bg, .bs-showcase-info { transition: none !important; transform: none !important; } }