/* Container */

/* Background Colors - Using Tailwind v4 Variables */
.bg-transparent {
  background-color: transparent;
}

.bg-blue {
  background-color: var(--color-background-blue);
}

.bg-cloud, .bg-neutral {
  background-color: var(--color-background-neutral);
}

.bg-blue-white-gradient {
  background: var(--color-background-blue);
  color: var(--color-white);
}

/* Ellipse Blur Effects - for Cloud background */
.ellipse-blur {
  position: absolute;
  width: 323px;
  height: 313px;
  border-radius: 50%;
  filter: blur(180px);
  pointer-events: none;
  z-index: 0;
}

/* Blue ellipse - bottom left area */
.ellipse-blur--blue-bottom {
  border-radius: 322.765px;
  opacity: 0.2;
  background: var(--brand-blue-300, #006EC9);
  filter: blur(180px);
  bottom: 8%;
  left: 7%;
}

/* Orange ellipse - top left area */
.ellipse-blur--orange-top {
  border-radius: 322.765px;
  opacity: 0.66;
  background: var(--brand-orange-500, #E0701F);
  filter: blur(180px);
  top: 9%;
  left: 6%;
  transform: rotate(180deg) scaleY(-1);
}

/* Blue ellipse - middle right area */
.ellipse-blur--blue-middle {
  border-radius: 322.765px;
  opacity: 0.35;
  background: var(--brand-blue-300, #006EC9);
  filter: blur(180px);
  right: 2%;
  transform: rotate(180deg) scaleY(-1);
}

/* Gradient Fade Effects - for Blue-White-Gradient background */
.gradient-fade {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Dark blue gradient fading from top */
.gradient-fade--blue-top {
  top: -200px;
  left: 0;
  width: 100%;
  height: 555px;
  background: linear-gradient(180deg, #061E68 0%, rgba(6, 30, 104, 0) 100%);
}

/* Gradient blur middle - responsive transforms */
.gradient-blur-middle {
  /* Mobile: rotate3d(1, 1, -20, 56deg) */
  transform: translate(-50%, -50%) rotate3d(1, 1, -20, 56deg);
  filter: blur(100px);
}

@media (min-width: 992px) {
  .gradient-blur-middle {
    /* Desktop (lg and above): rotate3d(1, 1, -1, 40deg) */
    transform: translate(-50%, -50%) rotate3d(1, 1, -1, 40deg);
  }
}

/* Padding Left */
.padding-left-none {
  padding-left: var(--spacing-none);
}

.padding-left-small {
  padding-left: var(--spacing-small);
}

.padding-left-medium {
  padding-left: var(--spacing-medium);
}

.padding-left-large {
  padding-left: var(--spacing-large);
}

.padding-left-x-large {
  padding-left: var(--spacing-x-large);
}

/* Padding Right */
.padding-right-none {
  padding-right: var(--spacing-none);
}

.padding-right-small {
  padding-right: var(--spacing-small);
}

.padding-right-medium {
  padding-right: var(--spacing-medium);
}

.padding-right-large {
  padding-right: var(--spacing-large);
}

.padding-right-x-large {
  padding-right: var(--spacing-x-large);
}

/* Padding Top */
.padding-top-none {
  padding-top: var(--spacing-none);
}

.padding-top-small {
  padding-top: var(--spacing-small);
}

.padding-top-medium {
  padding-top: var(--spacing-medium);
}

.padding-top-large {
  padding-top: var(--spacing-large);
}

.padding-top-x-large {
  padding-top: var(--spacing-x-large);
}

/* Padding Bottom */
.padding-bottom-none {
  padding-bottom: var(--spacing-none);
}

.padding-bottom-small {
  padding-bottom: var(--spacing-small);
}

.padding-bottom-medium {
  padding-bottom: var(--spacing-medium);
}

.padding-bottom-large {
  padding-bottom: var(--spacing-large);
}

.padding-bottom-x-large {
  padding-bottom: var(--spacing-x-large);
}

/* Margin Top */
.margin-top-none {
  margin-top: var(--spacing-none);
}

.margin-top-small {
  margin-top: var(--spacing-small);
}

.margin-top-medium {
  margin-top: var(--spacing-medium);
}

.margin-top-large {
  margin-top: var(--spacing-large);
}

.margin-top-x-large {
  margin-top: var(--spacing-x-large);
}

/* Margin Bottom */
.margin-bottom-none {
  margin-bottom: var(--spacing-none);
}

.margin-bottom-small {
  margin-bottom: var(--spacing-small);
}

.margin-bottom-medium {
  margin-bottom: var(--spacing-medium);
}

.margin-bottom-large {
  margin-bottom: var(--spacing-large);
}

.margin-bottom-x-large {
  margin-bottom: var(--spacing-x-large);
}