/* ============================================================
   /welcome-to-macpaw/ — page styles.
   Migrated from the compiled production stylesheet
   (resources/assets/sass/_gemini-gift.scss).
   ============================================================ */

.gemini-gift {
  text-align: center;
}

.gemini-gift .topper {
  margin-bottom: 0;
  margin-top: 100px;
}

.gemini-gift .h1 {
  font-weight: 600;
  margin: 30px auto 24px;
  max-width: 670px;
}

.gemini-gift .wrapper {
  width: 1105px;
}

.gemini-gift .wrapper-thin {
  margin: 0 auto;
  position: relative;
  width: 750px;
}

.gemini-gift .page-arrow {
  font-size: 0;
  height: 72px;
  margin: 0 auto 72px;
  position: relative;
  width: 72px;
}

.gemini-gift .page-arrow img {
  height: 10px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 20px;
  z-index: 2;
}

.gemini-gift .page-arrow:after {
  background: #e7ecf5;
  border-radius: 10px;
  content: "";
  height: 50px;
  left: 36px;
  opacity: .72;
  position: absolute;
  top: -2px;
  transform: rotate(45deg);
  transform-origin: 0 0;
  width: 50px;
  z-index: 0;
}

.gemini-gift .announcement {
  margin-bottom: 72px;
}

.gemini-gift .announcement__text {
  font-size: 20px;
  line-height: 1.6;
}

.gemini-gift .introduce__image {
  margin: 40px auto 0;
}

.gemini-gift .introduce__text {
  font-size: 20px;
  line-height: 1.6;
}

.gemini-gift .products {
  background: #f7f7fa;
  padding: 72px 15px 32px;
  text-align: center;
}

.gemini-gift .products .products-in {
  margin: 0 auto;
  max-width: 1140px;
}

.gemini-gift .products .products-text {
  margin-bottom: 48px;
}

.gemini-gift .products .products-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 0;
  justify-content: center;
  text-align: center;
}

.gemini-gift .products .product {
  display: inline-block;
  margin: 0 1% 34px;
  min-width: 285px;
  padding: 0;
  vertical-align: top;
  width: 31%;
}

.gemini-gift .products .product .product-link {
  align-items: center;
  background: #fff;
  border-radius: 12px;
  color: #42465b;
  display: flex;
  padding: 42px 28px;
  text-decoration: none;
  width: 100%;
}

.gemini-gift .products .product .product-link:hover .product-title {
  color: #288bff;
}

.gemini-gift .products .product .product-link:hover .product-icon {
  transform: scale(1.07);
}

.gemini-gift .products .product .product-link .product-icon {
  padding-right: 28px;
  text-align: center;
  transition: transform .3s ease-in-out;
  width: 104px;
  will-change: transform;
}

.gemini-gift .products .product .product-link .product-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  text-align: left;
  transition: color .2s ease-in-out;
}

.gemini-gift .products .product .product-link .product-text {
  color: #777989;
  font-size: 14px;
  text-align: left;
}

.gemini-gift .slider {
  margin: 0 -50px;
}

.gemini-gift .review {
  color: #42465b;
  padding: 0 50px 80px;
  position: relative;
  text-align: center;
}

.gemini-gift .review .review-img {
  margin-bottom: 27px;
}

.gemini-gift .review .review-text {
  font-size: 20px;
  margin-bottom: 42px;
  position: relative;
}

.gemini-gift .review .review-name {
  font-size: 16px;
  font-weight: 700;
}

.gemini-gift .review .review-sign {
  bottom: -60px;
  left: 67%;
  position: absolute;
  width: 210px;
}

.gemini-gift .review .review-sign img {
  max-width: 100%;
}

.gemini-gift .quote-left {
  background: url(../images/quotes-icon.svg) no-repeat 50%;
  height: 28px;
  left: -50px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 28px;
}

.gemini-gift .swiper-container {
  margin-bottom: 32px;
  padding: 120px 0 0;
}

.gemini-gift .swiper-slide-active .quote-left {
  opacity: 1;
  visibility: visible;
}

.gemini-gift .quote-right {
  background: url(../images/quotes-icon.svg) no-repeat 50%;
  height: 28px;
  opacity: 0;
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 28px;
}

.gemini-gift .swiper-slide-active .quote-right {
  opacity: 1;
  visibility: visible;
}

.gemini-gift .swiper-slide .review-author,
.gemini-gift .swiper-slide .review-img,
.gemini-gift .swiper-slide .review-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease-in-out,transform .5s ease-in-out;
}

.gemini-gift .swiper-slide.swiper-slide-active .review-author,
.gemini-gift .swiper-slide.swiper-slide-active .review-img,
.gemini-gift .swiper-slide.swiper-slide-active .review-text {
  opacity: 1;
  transform: translateY(0);
}

.gemini-gift .swiper-slide.swiper-slide-active .review-img {
  transition-delay: .2s;
}

.gemini-gift .swiper-slide.swiper-slide-active .review-text {
  transition-delay: .4s;
}

.gemini-gift .swiper-slide.swiper-slide-active .review-author {
  transition-delay: .6s;
}

/* ============================================================
   Signature drawing animations.
   Moved here from <style> blocks inside the inline signature SVGs.
   js/welcome-to-macpaw.js adds the SVG's data-class (start_k / start_p)
   to the active slide's signature to start the animation.
   ============================================================ */

.st0 {
  fill: none;
  stroke: #484D6A;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.CQWPiERv_0 {
  stroke-dasharray: 4 6;
  stroke-dashoffset: 5;
}

.start_k .CQWPiERv_0 {
  animation: CQWPiERv_draw 39ms ease-in-out 0ms forwards;
}

.CQWPiERv_1 {
  stroke-dasharray: 157 159;
  stroke-dashoffset: 158;
}

.start_k .CQWPiERv_1 {
  animation: CQWPiERv_draw 1234ms ease-in-out 39ms forwards;
}

.CQWPiERv_2 {
  stroke-dasharray: 36 38;
  stroke-dashoffset: 37;
}

.start_k .CQWPiERv_2 {
  animation: CQWPiERv_draw 289ms ease-in-out 1273ms forwards;
}

.CQWPiERv_3 {
  stroke-dasharray: 59 61;
  stroke-dashoffset: 60;
}

.start_k .CQWPiERv_3 {
  animation: CQWPiERv_draw 468ms ease-in-out 1562ms forwards;
}

.CQWPiERv_4 {
  stroke-dasharray: 41 43;
  stroke-dashoffset: 42;
}

.start_k .CQWPiERv_4 {
  animation: CQWPiERv_draw 328ms ease-in-out 2031ms forwards;
}

.CQWPiERv_5 {
  stroke-dasharray: 52 54;
  stroke-dashoffset: 53;
}

.start_k .CQWPiERv_5 {
  animation: CQWPiERv_draw 414ms ease-in-out 2359ms forwards;
}

.CQWPiERv_6 {
  stroke-dasharray: 37 39;
  stroke-dashoffset: 38;
}

.start_k .CQWPiERv_6 {
  animation: CQWPiERv_draw 296ms ease-in-out 2773ms forwards;
}

.CQWPiERv_7 {
  stroke-dasharray: 38 40;
  stroke-dashoffset: 39;
}

.start_k .CQWPiERv_7 {
  animation: CQWPiERv_draw 304ms ease-in-out 3070ms forwards;
}

.CQWPiERv_8 {
  stroke-dasharray: 26 28;
  stroke-dashoffset: 27;
}

.start_k .CQWPiERv_8 {
  animation: CQWPiERv_draw 210ms ease-in-out 3375ms forwards;
}

.CQWPiERv_9 {
  stroke-dasharray: 25 27;
  stroke-dashoffset: 26;
}

.start_k .CQWPiERv_9 {
  animation: CQWPiERv_draw 203ms ease-in-out 3585ms forwards;
}

.CQWPiERv_10 {
  stroke-dasharray: 11 13;
  stroke-dashoffset: 12;
}

.start_k .CQWPiERv_10 {
  animation: CQWPiERv_draw 93ms ease-in-out 3789ms forwards;
}

.CQWPiERv_11 {
  stroke-dasharray: 16 18;
  stroke-dashoffset: 17;
}

.start_k .CQWPiERv_11 {
  animation: CQWPiERv_draw 132ms ease-in-out 3882ms forwards;
}

.CQWPiERv_12 {
  stroke-dasharray: 61 63;
  stroke-dashoffset: 62;
}

.start_k .CQWPiERv_12 {
  animation: CQWPiERv_draw 484ms ease-in-out 4015ms forwards;
}

@keyframes CQWPiERv_draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes CQWPiERv_fade {
  0% {
    stroke-opacity: 1;
  }
  95.40229885057471% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
  }
}

.fJEtZuwr_0 {
  stroke-dasharray: 68 70;
  stroke-dashoffset: 69;
}

.start_p .fJEtZuwr_0 {
  animation: fJEtZuwr_draw 229ms ease-in-out 0ms forwards;
}

.fJEtZuwr_1 {
  stroke-dasharray: 30 32;
  stroke-dashoffset: 31;
}

.start_p .fJEtZuwr_1 {
  animation: fJEtZuwr_draw 102ms ease-in-out 229ms forwards;
}

.fJEtZuwr_2 {
  stroke-dasharray: 1005 1007;
  stroke-dashoffset: 1006;
}

.start_p .fJEtZuwr_2 {
  animation: fJEtZuwr_draw 3342ms ease-in-out 332ms forwards;
}

.fJEtZuwr_3 {
  stroke-dasharray: 97 99;
  stroke-dashoffset: 98;
}

.start_p .fJEtZuwr_3 {
  animation: fJEtZuwr_draw 325ms ease-in-out 3674ms forwards;
}

@keyframes fJEtZuwr_draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fJEtZuwr_fade {
  0% {
    stroke-opacity: 1;
  }
  95.1219512195122% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
  }
}

.ZtfpiLXw_0 {
  stroke-dasharray: 475 477;
  stroke-dashoffset: 476;
}

.start_k .ZtfpiLXw_0 {
  animation: ZtfpiLXw_draw 1777ms ease 0ms forwards;
}

.ZtfpiLXw_1 {
  stroke-dasharray: 112 114;
  stroke-dashoffset: 113;
}

.start_k .ZtfpiLXw_1 {
  animation: ZtfpiLXw_draw 422ms ease 1777ms forwards;
}

@keyframes ZtfpiLXw_draw {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes ZtfpiLXw_fade {
  0% {
    stroke-opacity: 1;
  }
  93.75% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
  }
}