.hero{
  height: 80vh !important;
  min-height: 80vh !important;
}
.hero-bg {
  background-color: #6b0f35;
  background-image:
      /* light pink glow - top left */
      radial-gradient(circle at 8% 15%, rgba(230, 195, 205, 0.9) 0%, rgba(220, 170, 185, 0.5) 25%, rgba(180, 90, 110, 0) 55%),
      /* bright magenta vein - diagonal middle */
      radial-gradient(ellipse 500px 700px at 42% 40%, rgba(155, 16, 60, 0.95) 0%, rgba(160, 10, 60, 0.6) 35%, rgba(107, 15, 53, 0) 65%),
      /* deep wine dark patch - right */
      radial-gradient(circle at 78% 55%, rgba(50, 5, 20, 0.9) 0%, rgba(50, 5, 20, 0.3) 40%, rgba(107, 15, 53, 0) 70%),
      /* rose highlight - far right edge */
      radial-gradient(circle at 100% 20%, rgba(180, 40, 90, 0.6) 0%, rgba(107, 15, 53, 0) 50%),
      linear-gradient(115deg, #d69fad 0%, #7e0a34 35%, #6b0f35 60%, #3d0818 100%);
  background-blend-mode: normal;
  background-size: 220% 220%;
  background-position: 0% 0%;
  animation: heroShiftPink 14s ease-in-out infinite;
}
h2.st{
    font-size: 25px !important;
}

@keyframes heroShiftPink {
  0% {
      background-position: 0% 0%;
      filter: brightness(1) saturate(1);
  }
  20% {
      background-position: 65% 20%;
      filter: brightness(1.1) saturate(1.15);
  }
  40% {
      background-position: 85% 65%;
      filter: brightness(0.95) saturate(1.05);
  }
  60% {
      background-position: 25% 80%;
      filter: brightness(1.15) saturate(1.2);
  }
  80% {
      background-position: 55% 35%;
      filter: brightness(0.9) saturate(0.95);
  }
  100% {
      background-position: 0% 0%;
      filter: brightness(1) saturate(1);
  }
}

/* Image hover effect */
.portc .container img {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portc .container img:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Modal image styling */
.modal-image-full {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}

.modal-content {
  background: transparent !important;
  border: none !important;
}

.modal-backdrop.show {
  opacity: 0.9;
}

.modal-header {
  border-bottom: none !important;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  padding: 20px;
}

.modal-header .btn-close {
  background-color: rgba(255,255,255,0.8);
  border-radius: 50%;
  padding: 10px;
  opacity: 1;
  margin: 10px;
}

.modal-header .btn-close:hover {
  background-color: white;
  transform: scale(1.1);
}

.modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 100vh;
}

  @media (max-width: 576px) {
      .modal-body {
        align-items: center !important;
      }
  }

/* Loader style */
.modal-loader {
  display: none;
  text-align: center;
  color: white;
  font-size: 18px;
}

.modal-loader.show {
  display: block;
}