:root {
    --fifa-grad: linear-gradient(90deg,#38B6FF 0%, #7B4FD4 20%,#E8417A 38%, #E8414A 52%, #F07040 68%,#F5A623 85%, #F5C842 100%);
}

body {
    background-color:#06033A!important;
    font-family: "Chakra Petch";
    background-image:url(../images/social-bonus/bg-mobile.webp?v=2);
    background-repeat: repeat-y;
    background-size: 100%;
}

.footer-v2 {
    background-color: transparent!important;
}

.card-module .heading {
    background: var(--fifa-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display:table;
    margin: 0 auto;
    margin-bottom:80px;
    padding: 0 .3em;
}
.card-module ul li .title {
    background: var(--fifa-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


small {
    font-family: inherit;
}

.page-template-social-sportsbook-bonus * {
    font-family: 'Chakra Petch', sans-serif;
}
.page-template-social-sportsbook-bonus .cs-site-inner {
    background-color: #06033a;
}

.generic-copy {
    display:flex;
    flex-direction: column;
    gap:20px;
    margin-top:50px;
    margin-bottom:50px;
}
.generic-copy {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
}
.generic-copy span {
    font-size: 16px;
    line-height: 24px; /* 150% */
}
.generic-copy .heading {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px; /* 133.333% */  
    margin:0;  
}

.cs-site-content {
    margin-top:0;
}

.light-yellow{
    color: #FED529;
}

.how-to-claim picture {
    aspect-ratio: 720/538;
}

.how-to-claim .heading br {
    display:none;
}

.how-to-claim .heading {
    text-shadow: none;
    font-family: inherit;
    background: linear-gradient(0deg, #FF7403 0%, #FFDF7F 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.stay-in-touch {
    background-image: none !important;
}

.coin-gc-sc {
    aspect-ratio:68/66;
    width:35px;
    height:auto;
}
.testimonials .title {
    margin-bottom: 1rem;
}

.hero-banner .subtitle {
    aspect-ratio: 1019/73;
    max-width:512px;
    width:80%;
    display:block;
    margin:0 auto;
}

.hero-banner:before {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100px;
    content: "";
    background: linear-gradient(
    to bottom,
    rgba(6, 3, 58, 1),
    rgba(6, 3, 58, 0)
    );
    z-index: 2;
    pointer-events: none;
}
.hero-banner:after {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100px;
    content: "";
    background: linear-gradient(
    to bottom,
    rgba(6, 3, 58, 0),
    rgba(6, 3, 58, 1)    
    );
    z-index: 2;
    pointer-events: none;    
}
.hero-banner .content,
.hero-banner .wrapper {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height:80%;
    position: relative;
    z-index:3;
}
.hero-banner .content {
    height:100%;
}
.hero-banner picture img {
    width:100%;
    height:auto;
}
.hero-banner .wrapper .bottom {
    display:flex;
    flex-direction: column;
    align-items: center;
}
.hero-banner .wrapper small {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
}
.hero-banner .wrapper small sup {
    top: -0.1em;
    font-size: 100%;
}

.hero-banner .value {
    text-shadow: 0 3.063px 2.713px rgba(0, 0, 0, 0.50);
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.67px;
    display:flex;
    justify-content: center;
    gap:10px;
    align-items: center
}

.hero-banner {
    position: relative;
    background-image:var(--hero-bg-mobile);
    background-size: 100%;
    background-repeat: no-repeat;
    aspect-ratio:var(--hero-bg-mobile-ratio);
    width:100%;
    height:90vh;   
    max-height:700px; 
}
.hero-banner .title {
    aspect-ratio: 426/348;
    width:55%;
    margin:0 auto;
    display:block;
}

.hero-banner .free-spins {
    aspect-ratio: 346/27;
    width:75%;
    max-width:444px;
    margin: 10px auto 0;
    display:block;
}

.offer-bottom .heading{
    font-size:24px;
    line-height:28px;
}

@media (min-width:390px) {
    .hero-banner .wrapper {
        height:86%;
    }
}

@media (min-width:400px) {
    .hero-banner .value {
        font-size:34px;
    }
}
@media (min-width:440px) {
    .hero-banner .wrapper {
        height:90%;
    }

    .coin-gc-sc {
        width:40px;
    }
}

@media (min-width:768px) {
    body {
        background-image:url(../images/social-bonus/bg-desktop.webp?v=3);
    }

    .how-to-claim .heading br {
        display:block;
    }

    .generic-copy div:first-of-type {
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .generic-copy .heading {
        padding-top:25px;
    }
    .how-to-claim picture {
        aspect-ratio: 1696/1506;
        max-width: 470px;
    }    
    .hero-banner {
        background-image:var(--hero-bg-desktop);
        aspect-ratio: var(--hero-bg-desktop-ratio);  
        background-position:center;
        height:auto;
    }
    .hero-banner .wrapper {
        width:53%;
        height:auto;
        gap:10px;
        margin-left:5%;
    }
    .hero-banner .title {
        aspect-ratio: 864/720;
        width: 70%;
        max-width:432px;
    }    

    .hero-banner .free-spins {
        aspect-ratio: 1044/82;
        width:67%;
    }
    .sign-up.large {
        width:74%;
    }
}

@media (min-width:1024px) {
    .hero-banner .wrapper {
        margin-left:1%;
    }

    .how-to-claim h2 {
        font-size:44px;
        line-height: normal;
        letter-spacing: 1.76px;        
    }
}

@media (min-width:1366px) {
   .hero-banner {
        max-height:920px;
        display:flex;
        align-items: center;
   }
}

@media (min-width:1920px) {
    .hero-banner .wrapper {
        width:1400px;

        margin:0 auto;
        align-items: flex-start;
    }

    .hero-banner .content {
        scale: 1.3;
    }
}
@media (min-width:3840px) {
    .hero-banner .content {
        scale: 1.5;
    }    
}