/* Sections */

/* Body Padding */

body {
  padding-top: 100px;
}

/* Header */

header {
  border-bottom: 0.875rem solid var(--Primary);
}

.navbar > div {
  display: flex;
  justify-content: space-between;
}

/* Footer */

footer {
  background: var(--Primary);
  padding: 6.25rem 0;
}

/* Section Margin */

main,
section {
  margin-top: calc(3.125rem * 3);
  margin-bottom: calc(3.125rem * 3);
}

/* Secondary Section */

.secondary-section {
  background: var(--Gray-500);
  background-position: 100% 0;
}

/* Parallax */

.parallax-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(
      0deg,
      var(--Light) 0%,
      rgba(255, 255, 255, 0) 25%
    ),
    linear-gradient(
      91deg,
      rgba(16, 6, 159, 0.45) 36.56%,
      rgba(122, 112, 255, 0) 64.42%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

img.parallax {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: transform 0.1s ease-out;
}

.parallax-container img.parallax {
  transform: translateX(-50%);
  transform: translateY(-50%);
}

/* Media Queries for Parallax */

@media (min-width: 320px) {
  .parallax-container {
    height: 200px;
  }
}

@media (min-width: 768px) {
  .parallax-container {
    height: 250px;
  }
}

@media (min-width: 1024px) {
  .parallax-container {
    height: 300px;
  }
}

/* Text carousel */
.carousel {
  position: relative;
  overflow: hidden;
  outline: none;
}

.carousel-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
  display: block;
  opacity: 1;
}

.carousel-controls {
  margin-top: 10px;
}

.carousel-indicators button {
  margin: 0 4px;
  border: none;
  background-color: var(--Gray-700);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-indicators button.active {
  background-color: var(--Primary) !important;
}

.carousel-indicators button.answered {
  background-color: var(--Success);
}

body.swal2-shown > [aria-hidden="true"] {
  transition: 0.1s filter;
  filter: blur(10px);
}