/* xl - DESKTOP STYLES */
body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', Helvetica, Arial, Lucida, sans-serif;
}
body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
  padding-top: 0;
}
.container {
  max-width: 100%;
  width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.top-slider {
  position: relative;
  overflow: hidden;
  height: auto;
  background: linear-gradient(90deg, #000000CC 0%, #DEDEDE00 100%);
}
@media (min-width: 768px) {
  .top-slider {
    height: 600px;
  }
}
.slides {
  display: flex;
  transition: transform 1s ease;
  height: 480px;
  position: relative;
}
@media (min-width: 768px) {
  .slides {
    height: 100%;
    max-height: inherit;
  }
}
.slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
}
.slide-1 {
  background-image: url('https://agapehouse.ca/wp-content/uploads/2024/09/Slide-1-1-scaled.webp');
}
.slide-2 {
  background-image: url('https://agapehouse.ca/wp-content/uploads/2024/09/Slide-2-1-1-scaled.webp');
}
.slide-3 {
  background-image: url('https://agapehouse.ca/wp-content/uploads/2024/09/Slide-3-1-scaled.webp');
}
.slide-4 {
  background-image: url('https://agapehouse.ca/wp-content/uploads/2024/09/Slide-4-1-scaled.webp');
}
.slide h1 {
  margin: 0 0 20px;
  text-shadow: 0px 3px 6px #00000029;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  width: 100%;
}
@media (min-width: 768px) {
  .slide h1 {
    font-size: 60px;
    width: 496px;
  }
}
.slide h2 {
  margin: 0 0 20px;
  text-shadow: 0px 3px 6px #00000029;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  width: 100%;
}
@media (min-width: 768px) {
  .slide h2 {
    font-size: 60px;
    width: 496px;
  }
}
.slide h2.slide-2 {
  width: 611px;
}
.slide p {
  font-size: 24px;
  line-height: 35px;
  width: 100%;
  margin: 0 0 30px;
  text-shadow: 0px 3px 6px #00000029;
  color: #fff;
}
@media (min-width: 768px) {
  .slide p {
    width: 420px;
    font-size: 30px;
  }
}
.slide.slide-right.active .slide-content {
  animation-name: slider-title-in;
  animation-duration: 1s;
  animation-delay: 0.025s;
  animation-fill-mode: forwards;
}
.slide.slide-left.active .slide-content {
  animation-name: slider-title-in;
  animation-duration: 1s;
  animation-delay: 0.025s;
  animation-fill-mode: forwards;
}
.slide-content {
  padding: 0 48px;
  margin: 0 auto;
  width: 100%;
  max-width: 1080px;
  box-sizing: border-box;
  transform: translate(-400px, 0);
  opacity: 0;
}
@media (min-width: 768px) {
  .slide-content {
    padding: 0 64px;
  }
}
@keyframes slider-title-in {
  0% {
    transform: translate(0, -300px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slider-title-out {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -300px);
  }
}
@keyframes slider-content-in {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slider-content-out {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-300px, 0);
    opacity: 0;
  }
}
.slider-btn {
  font-family: 'PT Sans', Helvetica, Arial, Lucida, sans-serif;
  padding: 12px 40px;
  border-radius: 26px;
  border: 0;
  color: #fff;
  background: #EC4399;
  font-size: 18px;
  font-weight: 700;
}
.slider-btn:hover {
  background: #63346E;
}
.slider-nav {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.slider-nav .slider-dot {
  width: 40px;
  height: 5px;
  border-radius: 26px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.slider-nav .slider-dot.active {
  background-color: #EC4399;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  color: #63346E;
  font-weight: 800;
  border: none;
  border-radius: 20px;
  width: 24px;
  height: 24px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  opacity: 0.75;
  transition-duration: 0.4s;
}
@media (min-width: 768px) {
  .slider-arrow {
    width: 40px;
    height: 40px;
    background-size: 40px;
  }
}
.slider-arrow:hover {
  opacity: 1;
  transition-duration: 0.4s;
}
.slider-arrow.left {
  left: 16px;
  background-image: url(https://agape-house.websitepro.hosting/wp-content/uploads/2024/09/btn-left.svg);
}
.slider-arrow.right {
  right: 16px;
  background-image: url(https://agape-house.websitepro.hosting/wp-content/uploads/2024/09/btn-right.svg);
}
.game-options {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}
.game-options .option {
  flex: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 20px;
  box-shadow: 0 4px 6px var(--shadow-color);
  aspect-ratio: 1;
  background-image: var(--option-gradient);
}
.game-options .option:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px var(--shadow-color);
}
.game-options .option .icon {
  font-size: 48px;
  margin-bottom: 10px;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
}
.game-options .option .icon i {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.game-options .option:nth-child(1):hover .icon i {
  animation: flipCoin 3s ease forwards;
}
.game-options .option:nth-child(2):hover .icon i {
  animation: pulseIcon 3s ease-in-out alternate 6;
}
.game-options .option:nth-child(3):hover .icon i {
  animation: openBox 3s ease forwards;
}
.game-options .option:nth-child(4):hover .icon i {
  animation: spinWheel 3s linear forwards;
}
.game-options .option:nth-child(5):hover .icon i {
  animation: upgradeJump 3s ease forwards;
}
.game-options .option p {
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .game-options .option {
    flex-basis: calc(50% - 10px);
  }
}
@media (max-width: 480px) {
  .game-options .option {
    flex-basis: 100%;
  }
}
@keyframes flipCoin {
  0%, 100% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
}
@keyframes pulseIcon {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes openBox {
  0%, 100% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(180deg);
  }
}
@keyframes spinWheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes upgradeJump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sourceRoot%22%3A%22%2F%22%2C%22sources%22%3A%5B%22(stdin)%22%2C%22srv%2Fhtdocs%2Fwp-content%2Fcustom_codes%2F1740-scss-desktop.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAC8BA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKI%3BAAAA%3BAAAA%3BAAMJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAA5CI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAuDJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAvDI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAmEJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAaI%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAIF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAhGE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAA6GA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAA7GA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAA0HI%3BAAAA%3BAAAA%3BAAKJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAA%2FHA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAA%2BID%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAYA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAYH%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAvKI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAoLH%3BAACE%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMF%3BAACE%3BAAAA%3BAAAA%3BAAGA%3BAAAA%3BAAAA%3BAAAA%3BAAKF%3BAACE%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMF%3BAACE%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUH%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUI%3BAAAA%3BAAAA%3BAAKJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQI%3BAAAA%3BAAAA%3BAAMR%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAvQI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAiSH%3BAAAA%3BAAAA%3BAAAA%3BAAKG%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAMJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAcI%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOJ%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAUR%3BAACI%3BAAAA%3BAAAA%3BAAAA%3BAAKJ%3BAACI%3BAAAA%3BAAAA%3BAAAA%3BAAKJ%3BAACI%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAAAA%3BAAGJ%3BAACI%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAAAA%3BAAGJ%3BAACI%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAAAA%3BAAGJ%3BAACI%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAAAA%3BAAGJ%3BAACI%3BAAAA%3BAAAA%3BAACA%3BAAAA%3BAAAA%3BAAAA%22%7D */