@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
 :root {
    /* Colors */
     --color-primary-red: #F4313F;
     --color-white: #FFF;
     --color-text-dark: #372C35;
     --color-pink-light: #FFCDD6;
    /* Fonts */
     --font-luckiest: "Luckiest Guy", cursive;
     --font-bluescreens: "TT Bluescreens";
     --font-fjalla: "Fjalla One";
    /* Background images */
     --bg-valentine-main: url("../images/valentine/vl-background.png");
     --bg-envelope: url("../images/valentine/pink-envelope.webp");
     --bg-border: url("../images/valentine/border.png");
     --bg-top-border: url("../images/valentine/top-border.png");
    /* Shadows */
     --shadow-card: 0 4px 20px rgba(218, 190, 190, 0.5);
    /* Common sizes */
     --radius-none: 0;
    /* Sizes */
     --border-width: 40px;
}
 body {
     background: var(--bg-valentine-main) no-repeat;
     background-size: cover;
}
 .page-template-templates.page-template-valentines-day section {
     margin-top: 100px;
}
/* BANNER - START */
 .hero-banner {
     position: relative;
     margin-top: 0 !important;
     aspect-ratio: 768/1140;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     overflow: hidden;
}
 .hero-banner .bg {
     background-image: var(--hero-banner-mobile);
     background-repeat: no-repeat;
     background-size: cover;
     aspect-ratio: 768/1140;
     width: 100%;
     mask-image: linear-gradient(to bottom, white 90%, transparent 100%);
     -webkit-mask-image: linear-gradient(to bottom, white 90%, transparent 100%);
     position: absolute;
     z-index: 0;
}
 .hero-banner .char {
     aspect-ratio: 770/694;
     width: 100%;
     position: relative;
     z-index: 1;
}
 .hero-banner .char img {
     width: 100%;
     height: auto;
}
 .hero-banner .wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: -52%;
     width: 89%;
}
 .hero-banner .wrapper .billboard {
     background-image: var(--billboard-bg);
     background-repeat: no-repeat;
     background-size: contain;
     aspect-ratio: 1672/1142;
     width: 100%;
     position: relative;
     z-index: 1;
     padding-top: 15%;
     display: flex;
     flex-direction: column;
     align-items: center;
     color: var(--color-white);
     font-family: var(--font-bluescreens);
}
 .hero-banner .wrapper .billboard .free-spins {
     aspect-ratio: 884 / 374;
     width: 45%;
}
 .hero-banner .wrapper .billboard * {
     filter: drop-shadow(0 3px 5px #840F21);
     font-family: var(--font-bluescreens);
}
 .hero-banner .wrapper .billboard .value {
     display: flex;
     font-family: var(--font-bluescreens);
     font-size: 26px;
     font-style: normal;
     font-weight: 700;
     align-items: center;
     gap: 5px;
}
 .hero-banner .wrapper .billboard .sc, .hero-banner .wrapper .billboard .gc {
     aspect-ratio: 61/61;
     width: 24px;
}
 .hero-banner .wrapper .billboard .plus {
     color: #F5F9FB;
     font-size: 30px;
}
 .hero-banner .wrapper .billboard .gc-amount {
     color: #FFD660;
}
 .hero-banner .wrapper .billboard .sc-amount {
     color: #36FFD0;
}
 .hero-banner .wrapper .billboard .date {
     font-size: 17px;
     text-align: center;
}
 .hero-banner .wrapper .billboard small {
     text-align: center;
     font-size: 12px;
     font-style: normal;
     font-weight: 600;
}
 .hero-banner .wrapper .sign-up {
     width: 100px;
     margin-top: -28px;
     position: relative;
     z-index: 5;
     aspect-ratio: 418/350;
}
 .hero-banner .wrapper .sign-up img {
     aspect-ratio: 418/350;
     width: 100%;
}
 .sign-up {
     -webkit-tap-highlight-color: transparent;
}
 .sign-up img {
     -webkit-user-select: none;
     user-select: none;
     -webkit-touch-callout: none;
     transition: transform 0.1s ease, filter 0.1s ease;
}
 .sign-up:active img {
     transform: scale(0.96);
     filter: brightness(0.95);
}
 @media (min-width:390px) {
     .hero-banner .wrapper {
         margin-top: -45%;
         width: 100%;
         max-width: 430px;
    }
     .hero-banner .wrapper .billboard {
         padding-top: 60px;
    }
     .hero-banner .wrapper .sign-up {
         width: 150px;
         margin-top: -23px;
    }
     .hero-banner .wrapper .billboard .free-spins {
         width: 50%;
    }
     .hero-banner .wrapper .billboard .value {
         font-size: 44px;
         gap: 8px;
    }
     .hero-banner .wrapper .billboard .sc, .hero-banner .wrapper .billboard .gc {
         width: 36px;
    }
}
 @media (min-width:768px) {
     .hero-banner {
         flex-direction: row-reverse;
         aspect-ratio: 1800/756;
         max-height: 756px;
    }
     .hero-banner .bg {
         background-image: var(--hero-banner-desktop);
         aspect-ratio: 1800/756;
         max-height: 756px;
    }
     .hero-banner .char {
         flex: 0;
         aspect-ratio: 924/766;
         height: 100%;
         mask-image: linear-gradient(to bottom, white 90%, transparent 100%);
         -webkit-mask-image: linear-gradient(to bottom, white 90%, transparent 100%);
    }
     .hero-banner .char img {
         aspect-ratio: 924/766;
         height: 100%;
         width: auto;
    }
     .hero-banner .wrapper {
         margin-top: 0;
         margin-right: -12%;
         width: 370px;
    }
     .hero-banner .wrapper .sign-up {
         width: 90px;
    }
     .hero-banner .wrapper .billboard .free-spins {
         width: 45%;
    }
}
 @media (min-width:993px) {
     .header-lobby-not-login-header {
         margin-bottom: 0;
    }
     .header-lobby-not-login-logo img.expand {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: scale(1.4) translate(-50%, -50%);
         transform-origin: left top;
         transition: transform 0.33s ease-in-out;
    }
}
 @media (min-width:1024px) {
     .hero-banner .wrapper .billboard .free-spins {
         width: 50%;
    }
     .hero-banner .wrapper .billboard {
         padding-top: 74px;
    }
     .hero-banner .wrapper .sign-up {
         width: 100px;
    }
     .hero-banner .wrapper {
         width: 440px;
    }
}
 @media (min-width:1200px) {
     .hero-banner .wrapper {
         width: 580px;
         max-width: none;
    }
     .hero-banner .wrapper .billboard {
         padding-top: 100px;
    }
     .hero-banner .wrapper .billboard small {
         font-size: 18px;
    }
     .hero-banner .wrapper .billboard .date {
         font-size: 28px;
    }
     .hero-banner .wrapper .billboard .value {
         font-size: 50px;
    }
     .hero-banner .wrapper .billboard .sc, .hero-banner .wrapper .billboard .gc {
         width: 30px;
    }
     .hero-banner .wrapper .sign-up {
         width: 150px;
         margin-top: -34px;
    }
}
 @media (min-width:1920px) {
     .hero-banner .wrapper {
         margin-right: -200px;
    }
}
 @media (min-width:1600px) {
     .hero-banner {
         justify-content: center;
    }
     .hero-banner .wrapper {
         width: 780px;
         margin-right: -170px;
    }
     .hero-banner .wrapper .billboard {
         padding-top: 120px;
    }
     .hero-banner .wrapper .billboard .value {
         font-size: 80px;
         margin-top: -10px;
         margin-bottom: -10px;
         gap: 15px;
    }
     .hero-banner .wrapper .billboard .plus, .hero-banner .wrapper .billboard .date {
         font-size: 27px;
         margin: 20px;
    }
     .hero-banner .wrapper .billboard .sc, .hero-banner .wrapper .billboard .gc {
         width: 62px;
    }
     .hero-banner .wrapper .billboard small {
         font-size: 24px;
    }
     .hero-banner .wrapper .sign-up {
         width: 190px;
         margin-top: -50px;
    }
}
/* BANNER - END */
 .promotion-heading {
     text-align: center;
}
 .promotion-heading p, .ready-to-join p {
     color: var(--color-text-dark);
     font-family: var(--font-bluescreens);
     font-size: 30px;
     font-weight: 600;
     line-height: 30px;
}
 .promotion-heading h1 {
     color: var(--color-primary-red);
     text-align: center;
     font-family: var(--font-luckiest);
     font-size: 60px;
     font-weight: 400;
     line-height: 49px;
}
 .page-template-valentines-day h2 {
     font-family: var(--font-luckiest);
     color: var(--color-primary-red);
     font-size: 60px;
     line-height: 92%;
     margin-bottom: 20px;
}
 .page-template-valentines-day h2.faq-title {
     font-size: 46px;
     line-height: 100%;
}
 .promo-card {
     border-radius: 0;
     border: 10px solid var(--color-white);
     background: var(--color-primary-red);
     box-shadow: var(--shadow-card);
     max-width: 467px;
     gap: 20px;
}
 .promo-card.bonus-card {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
}
 .promo-card span.highlight {
     font-size: 100px;
}
 .edge-logo {
     margin-bottom: 130px;
}
 .spins-card::after, .bonus-card::before {
     content: "";
     position: absolute;
     bottom: -57px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--bg-envelope) center / contain no-repeat;
     pointer-events: none;
     z-index: 9;
     width: 479px;
     height: 300px;
}
 .love-story-cards-container {
     display: flex;
     justify-content: center;
     flex-direction: column;
     gap: 80px;
}
 .challenge-card, .referral-card {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
}
 .card-frame {
     position: relative;
     display: inline-block;
}
 .card-content {
     background: var(--color-pink-light);
     display: flex;
     align-items: center;
     gap: 30px;
     position: relative;
     z-index: 2;
     filter: drop-shadow(var(--shadow-card));
     text-decoration: none;
}
 .challenge-card .card-content {
     padding-left: 26px;
}
 .referral-card .card-content {
     padding: 26px 30px;
}
 .card-content p {
     color: var(--color-primary-red);
     font-family: var(--font-fjalla);
     font-size: 28px;
     line-height: 38px;
}
 .challenge-card .card-content p {
     padding-top: 26px;
}
 .challenge-card>h3, .challenge-card>.card-content, .referral-card>h3, .referral-card>.card-content {
     flex: 0 0 50%;
}
 h3.referral-bonus-title, h3.love-story-title {
     color: var(--color-primary-red);
     font-family: var(--font-luckiest);
     font-size: 76px;
     font-weight: 400;
     line-height: 92px;
}
 h3.referral-bonus-title {
     text-align: right;
}
 h3.love-story-title {
     text-align: left;
}
/* Borders */
 .border {
     position: absolute;
     background-image: var(--bg-border);
     background-repeat: repeat;
     z-index: 1;
}
 .border.left {
     top: 0;
     bottom: 0;
     left: -23px;
     width: var(--border-width);
     background-repeat: repeat-y;
     z-index: 11;
}
 .border.right {
     top: 0;
     bottom: 0;
     right: -29px;
     width: var(--border-width);
     background-repeat: repeat-y;
     transform: rotate(180deg);
     z-index: 111;
}
 .border.top {
     left: -5px;
     right: -12px;
     top: -32px;
     height: var(--border-width);
     background: var(--bg-top-border) repeat-x left;
     z-index: 10;
}
 .border.bottom {
     left: -5px;
     right: -12px;
     bottom: -35px;
     height: var(--border-width);
     background: var(--bg-top-border) repeat-x left;
     transform: rotate(180deg);
     z-index: 10;
}
 .black-friday-promo-inner {
     background-image: url(../images/valentine/steps-vl-bg-desktop.png);
     background-size: cover;
     background-position: right;
}
 @media (max-width: 1024px) {
     .spins-card::after, .bonus-card::before {
         bottom: -48px !important;
         right: 0px !important;
         left: 50% !important;
         transform: translate(-50%, -3%) !important;
         background-size: cover;
         width: 106% !important;
         height: 72% !important;
    }
     .edge-logo {
         margin-bottom: 90px;
    }
     .promo-card.spins-card {
         align-items: center;
    }
     .promo-card {
         min-height: 387px;
    }
     .promo-card-inner {
         align-items: center;
         justify-content: center;
    }
     .challenge-card>h3, .challenge-card>.card-content, .referral-card>h3, .referral-card>.card-content {
         flex: 0 0 100%;
         text-align: center;
    }
     .referral-card {
         flex-direction: column-reverse;
    }
     .challenge-card, .referral-card {
         flex-wrap: wrap;
         justify-content: center;
    }
     .black-friday-promo-inner {
         background-image: url(../images/valentine/steps-vl-bg-mobile.png);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: bottom;
    }
     .page-template-valentines-day h2 {
         font-size: 48px;
    }
     h3.referral-bonus-title, h3.love-story-title {
         font-size: 60px;
         line-height: 90%;
    }
     .promotion-heading h1 {
         font-size: 54px;
         line-height: 49px;
    }
}
 @media (max-width: 768px) {
     .promo-container {
         max-width: 370px;
    }
     .promo-card {
         min-height: 286px;
    }
}
 @media(max-width:576px) {
     .challenge-card .card-content {
         flex-direction: column;
         text-align: center;
         padding-left: unset;
         max-width: 345px;
    }
     .card-content p {
         font-size: 20px;
    }
     .challenge-card .card-content p {
         padding: 26px 10px 0px 10px;
    }
     .referral-card .card-content {
         flex-direction: column-reverse;
         text-align: center;
         max-width: 345px;
         padding: 26px 10px 26px 10px;
    }
     h3.referral-bonus-title, h3.love-story-title {
         font-size: 50px;
         line-height: 45px;
    }
     .page-template-valentines-day h2 {
         font-size: 40px;
         line-height: 92%;
    }
     .promotion-heading h1 {
         font-size: 50px;
         font-style: normal;
         font-weight: 400;
         line-height: 45px;
    }
     .promotion-heading p, .ready-to-join p {
         font-size: 20px;
         line-height: 100%;
    }
}