.custom-section-bg {
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    #253573 0%,
    #1d2c63 35%,
    #14204d 70%,
    #080f28 100%
  );
}

/* Subtle Grid Lines */
.custom-section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 64px 64px;
  z-index: 0;
}

/* Circular Outline Patterns */
.custom-section-bg::after {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  top: -310px;
  right: -280px;

  border: 1px solid rgba(178, 144, 88, 0.1);
  border-radius: 50%;

  box-shadow:
    0 0 0 65px transparent,
    0 0 0 66px rgba(178, 144, 88, 0.07);

  pointer-events: none;
  z-index: 0;
}

/* Content Above Background */
.custom-section-bg > .container,
.custom-section-bg > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Alternate Section Background */

.custom-section-bg {
  background: linear-gradient(
    135deg,
    #253573 0%,
    #1d2c63 35%,
    #14204d 70%,
    #080f28 100%
  );
}

/* Alternate Section - Reverse Gradient */

.custom-section-bg-alt {
  background: linear-gradient(
    135deg,
    #253573 0%,
    #1d2c63 35%,
    #14204d 70%,
    #080f28 100%
  );
}
.custom-title-bg {
  background: linear-gradient(
    135deg,
    #fef178 0%,
    #ffde5b 25%,
    #f8f477 50%,
    #f6e056 75%,
    #efe153 100%
  );
}

@keyframes rockingButton {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.box-own-shadow {
  animation: rockingButton 1.5s ease-in-out infinite;
  transform-origin: center;
  transition: all 0.3s ease;
  box-shadow:
    rgba(255, 0, 0, 0.3) 0px 1px 2px 0px,
    rgba(255, 0, 0, 0.15) 0px 2px 6px 2px !important;
}

.btn.btn-large {
  font-size: 24px !important;
  padding: 10px 20px !important;
}

.btn:hover {
  color: var(--bs-btn-hover-color) !important;
  background-color: var(--bs-btn-hover-bg) !important;
  border-color: var(--bs-btn-hover-border-color) !important;
}

@media screen and (max-width: 768px) {
  .btn.btn-large {
    font-size: 18px !important;
    padding: 5px 10px !important;
  }
}

.text-half-white {
  color: rgb(255, 255, 255, 0.7) !important;
}

.special-guest-badge {
  position: absolute;
  top: 0;
  left: 50%;

  transform: translate(-50%, -50%) !important;

  background: var(--bs-yellow);
  color: #080f28;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  padding: 5px 7px;
  border-radius: 30px;

  white-space: nowrap;
  z-index: 10;
}