.gallery-wrapper {
  z-index:auto!important}


:root {
  --gal-blue:#ad1b27;
  --gal-navy:#7d111b;
  --gal-gold:#e5b849;
  --gal-ink:#3f141a}

html,body {
  max-width:100%;
  overflow-x:hidden;
  background:#f8f6f3;
  font-family:Poppins,sans-serif}

.gallery-hero {
  position:relative;
  min-height:370px;
  padding:58px 20px 105px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  text-align:center;
  background:radial-gradient(circle at 82% 22%,rgba(229,184,73,.28),transparent 24%),linear-gradient(125deg,rgba(91,10,20,.95),rgba(173,27,39,.86)),url('images/f1.jpg') center/cover}

.gallery-hero:before {
  position:absolute;
  top:-90px;
  left:-100px;
  width:270px;
  height:270px;
  border:45px solid rgba(255,255,255,.07);
  border-radius:50%;
  content:''}

.gallery-hero:after {
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:85px;
  background:#f8f6f3;
  clip-path:polygon(0 72%,8% 62%,18% 70%,29% 50%,40% 63%,53% 42%,66% 62%,79% 48%,90% 65%,100% 50%,100% 100%,0 100%)}

.gallery-hero-content {
  position:relative;
  z-index:1;
  max-width:900px}

.gallery-chip {
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  margin-bottom:1.1rem;
  padding:.58rem 1rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#fff3b8;
  background:rgba(255,255,255,.1);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase}

.gallery-hero h1 {
  margin:0;
  color:#fff;
  font-size:clamp(3rem,7vw,5.2rem);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.05em}

.gallery-hero h1 span {
  color:var(--gal-gold)}

.gallery-hero p {
  max-width:680px;
  margin:1rem auto 0;
  color:rgba(255,255,255,.87);
  font-size:1.08rem;
  line-height:1.65}

.gallery-wrapper {
  position:relative;
  z-index:2;
  width:calc(100% - 48px);
  max-width:1180px;
  margin:-72px auto 70px}

.gallery-shell {
  padding:clamp(1.35rem,3vw,2.7rem);
  border:1px solid #eedfe0;
  border-radius:32px;
  background:rgba(255,255,255,.97);
  box-shadow:0 25px 65px rgba(109,19,30,.15)}

.gallery-intro {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.4rem;
  align-items:center;
  margin-bottom:1.5rem;
  padding:1.45rem;
  border:0;
  border-radius:22px;
  background:linear-gradient(135deg,#fff1f2,#fff9df);
  box-shadow:none}

.gallery-intro-icon {
  display:grid;
  width:76px;
  height:76px;
  place-items:center;
  border-radius:21px;
  color:#fff;
  background:linear-gradient(145deg,var(--gal-navy),var(--gal-blue));
  box-shadow:0 11px 24px rgba(109,19,30,.22);
  font-size:2rem;
  transform:rotate(-3deg)}

.gallery-intro small,.gallery-card-content small {
  color:var(--gal-blue);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase}

.gallery-intro h2 {
  margin:0 0 .4rem;
  color:var(--gal-ink);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:800}

.gallery-intro p {
  margin:0;
  color:#715e61;
  line-height:1.7}

.gallery-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px}

.gallery-card {
  overflow:hidden;
  border:1px solid #eedfe0;
  border-radius:26px;
  background:#fff;
  box-shadow:0 14px 34px rgba(109,19,30,.10);
  transition:.28s}

.gallery-card:hover {
  border-color:rgba(255,193,7,.7);
  box-shadow:0 22px 46px rgba(109,19,30,.16);
  transform:translateY(-5px)}

.gallery-card-trigger {
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:25px;
  color:inherit;
  background:#fff;
  text-align:left}

.gallery-card-cover {
  position:relative;
  height:270px;
  overflow:hidden;
  background:#0f172a}

.gallery-card-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s}

.gallery-card-trigger:hover img {
  transform:scale(1.07)}

.gallery-card-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:20px;
  color:#fff;
  background:linear-gradient(180deg,transparent 34%,rgba(125,17,27,.9))}

.gallery-card-count,.gallery-card-open {
  display:inline-flex;
  gap:7px;
  align-items:center;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(125,17,27,.88);
  font-size:.72rem;
  font-weight:800}

.gallery-card-open {
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  color:var(--gal-navy);
  background:var(--gal-gold);
  font-size:1rem}

.gallery-card-content {
  padding:20px 21px 22px}

.gallery-card-content h2 {
  margin:7px 0 6px;
  color:var(--gal-navy);
  font-size:1.18rem;
  font-weight:800}

.gallery-card-content p {
  margin:0;
  color:#715e61;
  font-size:.8rem}

.gallery-modal .modal-dialog {
  max-width:min(1180px,calc(100% - 32px))}

.gallery-modal .modal-content {
  overflow:hidden;
  border:0;
  border-radius:26px}

.gallery-modal .modal-header {
  padding:16px 20px;
  border:0}

.gallery-modal .modal-title {
  display:flex;
  gap:11px;
  align-items:center;
  color:var(--gal-navy);
  font-size:1.12rem;
  font-weight:800}

.gallery-modal .modal-title i {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:11px;
  color:var(--gal-navy);
  background:var(--gal-gold)}

.gallery-modal .modal-body {
  padding:0;
  background:#0f172a}

.gallery-carousel {
  overflow:hidden;
  background:#0f172a}

.media-frame {
  position:relative;
  display:flex;
  width:100%;
  height:520px;
  align-items:center;
  justify-content:center;
  overflow:hidden}

.media-frame:before {
  position:absolute;
  inset:-22px;
  background:var(--media-bg) center/cover;
  filter:blur(18px) brightness(.62);
  content:'';
  transform:scale(1.12)}

.media-frame img {
  position:relative;
  z-index:1;
  max-width:100%;
  max-height:100%;
  object-fit:contain}

.media-topbar {
  position:absolute;
  z-index:3;
  top:16px;
  right:18px;
  left:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  pointer-events:none}

.media-upload-title,.media-position {
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  color:#fff;
  background:rgba(21,37,61,.86);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  font-size:.9rem;
  font-weight:800}

.media-position {
  border-radius:999px;
  font-size:.78rem}

.media-description {
  margin:0;
  padding:14px 76px;
  color:rgba(255,255,255,.88);
  background:#0f172a;
  font-size:.9rem;
  line-height:1.55;
  text-align:center}

.gallery-carousel .carousel-control-prev,.gallery-carousel .carousel-control-next {
  top:260px;
  width:52px;
  height:52px;
  opacity:1;
  transform:translateY(-50%)}

.gallery-carousel .carousel-control-prev {
  left:20px}

.gallery-carousel .carousel-control-next {
  right:20px}

.gallery-carousel .carousel-control-prev-icon,.gallery-carousel .carousel-control-next-icon {
  width:48px;
  height:48px;
  border:2px solid rgba(255,255,255,.78);
  border-radius:50%;
  background-color:var(--gal-navy);
  background-size:46%;
  box-shadow:0 8px 22px rgba(5,20,66,.26)}

.gallery-empty {
  grid-column:1/-1;
  padding:3rem;
  border:1px dashed #bfd2df;
  border-radius:24px;
  color:#718096;
  background:#fff;
  text-align:center}

@media(max-width:980px) {
  .gallery-list {
  grid-template-columns:repeat(2,minmax(0,1fr))}

}

@media(max-width:700px) {
  .gallery-wrapper {
  width:calc(100% - 24px);
  margin:-48px auto 50px}

.gallery-intro {
  grid-template-columns:1fr;
  text-align:center}

.gallery-intro-icon {
  margin:auto}

.gallery-shell { border-radius:23px; padding:1.15rem }

.gallery-list {
  grid-template-columns:1fr;
  gap:18px}

.media-frame {
  height:300px}

.gallery-carousel .carousel-control-prev,.gallery-carousel .carousel-control-next {
  top:150px;
  width:44px;
  height:44px}

.gallery-carousel .carousel-control-prev {
  left:10px}

.gallery-carousel .carousel-control-next {
  right:10px}

.gallery-hero {
  min-height:330px;
  padding:48px 18px 90px}

}