@font-face {
    font-family: 'Gilroy';
    src: url(./fonts/Gilroy-ExtraBold.ttf) format('truetype');
    font-weight: bold;
}
  
body {
    font-family: 'Nunito', sans-serif;
}

a {
    cursor: pointer;
}
  
.gilroy {
    font-family: 'Gilroy', sans-serif;
}

.bg-hero {
    background:  
    url(./img/wide-2.svg) no-repeat bottom 300px left 150px,
    url(./img/wide-1.svg) no-repeat bottom 700px left 200px,
    url(./img/green-start-1.svg) no-repeat bottom 150px right 150px,

    url(./img/thin.svg) no-repeat top 300px left 400px,
    url(./img/thin-1.svg) no-repeat top 350px right 400px,
    url(./img/wide.svg) no-repeat top 50px right 100px,
    url(./img/green-start.svg) no-repeat top 100px left 300px,
    url(./img/hero-bg.png) no-repeat center center;
    border-radius: 0 0 100px 100px;
}

.body-stars-bg {
    background: 
    url(./img/stars-left.svg) no-repeat top 30% left 2%,
    url(./img/stars-right.svg) no-repeat top 18% right 1%;
}

.footer-stars-bg {
    background: 
    url(./img/stars-footer-left.svg) no-repeat center left 3%,
    url(./img/stars-footer-right.svg) no-repeat center right 5%;
}

.hero-header-text {
    font-weight: 700;
    padding-top: 20px;
    background: linear-gradient(to right, #918200, #BBAA1F, #ECDB4F, #FEEE63);
    text-shadow:
    1px 1px 2px #EDD93110,
    0 0 0.2em #EDD93199;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.liquid-glass {
   
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    backdrop-filter: blur(1px) brightness(1.1); /* Frosted glass effect */
    filter: url(./img/liquid-glass.svg); /* Link to SVG filter for distortion */

    box-shadow: rgb(204, 219, 232) 0 2px 1px 0px inset, rgba(255, 255, 255, 0.5) 0 2px 1px 0 inset,
    rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;

    /* Distorção líquida opcional via SVG filter */
    filter: url(./img/liquid-glass-distortion.svg);
}

.bg-bolao-header {
    background: url(./img/yellow-line.svg) no-repeat bottom left;
}

.lo-da-virada {
    width: 400px;
    height: 450px;
    background: url(./img/lo-piscapisca.png) no-repeat center center,  radial-gradient(circle at 50% 50%, #1CB65BA6, transparent 65%);
    background-size: cover;

} 

.testador-palpites-box {
    width: 400px;
    height: 450px;
    background: url(./img/shine-2.svg) no-repeat bottom right, url(./img/shine-1.svg) no-repeat top left;
}

.testador-palpites {
    margin: auto;
    width: 270px;
    height: 410px;
    background: url(./img/testador-palpite.png) no-repeat center center;
    box-shadow: 0px 0px 7px 7px #2952E135;
}


.icon-calendar {
    width: 20px;
    height: 20px;
    background: url(./img/icon-calendar.svg) no-repeat center center;
}

.icon-watch {
    width: 20px;
    height: 20px;
    background: url(./img/icon-watch.svg) no-repeat center center;
}

.icon-trophy {
    width: 20px;
    height: 20px;
    background: url(./img/icon-trophy.svg) no-repeat center center;
}

.active .icon-calendar {
    background: url(./img/icon-calendar-active.svg) no-repeat center center;
}

.active .icon-watch {
    background: url(./img/icon-watch-active.svg) no-repeat center center;
}

.active .icon-trophy {
    background: url(./img/icon-trophy-active.svg) no-repeat center center;
}

.selected-faq div:nth-child(2){
    display:block
  }
  
  .selected-faq img {
    transform: rotate(180deg);
  }

/* Esconde a scrollbar do carrossel de bolões */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

@media (max-width: 1500px) {
    .body-stars-bg {
        background: none;
    }
}


@media (max-width: 1024px) {

    .bg-hero {
        background:
        url(./img/thin-1.svg) no-repeat top 590px right,
        url(./img/wide-1.svg) no-repeat top 350px left,
        url(./img/wide.svg) no-repeat top 150px right -55px ,
        url(./img/green-start.svg) no-repeat top -25px left -25px,
        url(./img/hero-bg.png) no-repeat center center;
        border-radius: 0 0 25px 25px;
    }

    .lo-da-virada {
        width: 200px;
        height: 250px;
        background: url(./img/lo-piscapisca.png) no-repeat center center,  radial-gradient(circle at 50% 50%, #1CB65BA6, transparent 65%);
        background-size: cover;
    }     
    
    .body-stars-bg {
        background: none;
    }

    .footer-stars-bg {
        background: none;
    }
}

/* Modal Cashback */
#cashback-modal {
    animation: fadeIn 0.3s ease-in-out;
}

#cashback-modal > div:last-child {
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}