.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 1rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1200px) {

  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1173px;
  }
}



.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.8rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.p-6 {
  padding: 4rem !important;
}

.p-7 {
  padding: 5rem !important;
}

.p-8 {
  padding: 7.5rem !important;
}

.p-9 {
  padding: 10rem !important;
}

.p-10 {
  padding: 12.5rem !important;
}

.p-11 {
  padding: 15rem !important;
}


.bg-100 {
  background-color: #f9fafd !important;
}

.bg-200 {
  background-color: #edf2f9 !important;
}

.bg-300 {
  background-color: #d8e2ef !important;
}

.bg-400 {
  background-color: #b6c1d2 !important;
}

.bg-500 {
  background-color: #9da9bb !important;
}

.bg-600 {
  background-color: #748194 !important;
}

.bg-700 {
  background-color: #5e6e82 !important;
}

.bg-800 {
  background-color: #4d5969 !important;
}

.bg-900 {
  background-color: #344050 !important;
}

.bg-1000 {
  background-color: #232e3c !important;
}

.bg-1100 {
  background-color: #0b1727 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-primary {
  background-color: #4581fd !important;
}

.bg-secondary {
  background-color: #748194 !important;
}

.bg-success {
  background-color: #5bc142 !important;
}

.bg-info {
  background-color: #00abf5 !important;
}

.bg-warning {
  background-color: #ffa400 !important;
}

.bg-danger {
  background-color: #fb482b !important;
}

.bg-light {
  background-color: #f9fafd !important;
}

.bg-dark {
  background-color: #0b1727 !important;
}

.bg-body {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}



@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gradient-bg-anim {
  position: relative;
}

.gradient-bg-anim:after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: conic-gradient(from var(--angle) at 50% 50%, rgba(255, 133, 173, 0.05) 0deg, rgba(179, 158, 214, 0.12) 90deg, rgba(102, 184, 255, 0.3) 180deg, #feb185 360deg);
  z-index: -1;
  filter: blur(8px);
  animation: conic-gradient 20s linear infinite;
  border-radius: 18px;
}

.gradient-bg-anim::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: conic-gradient(from var(--angle) at 50% 50%, rgba(255, 255, 255, 0) 0deg, #FFFFFF 360deg);
  z-index: 0;
  animation: conic-gradient 20s linear infinite;
  border-radius: 18px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  inset: 0;
  padding: 7px;
}


@keyframes conic-gradient {
  0% {
    --angle: 0deg;
  }

  50% {
    --angle: 180deg;
  }

  100% {
    --angle: 360deg;
  }
}