@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;900&display=swap');
body { font-family: 'Montserrat', sans-serif; background: #e4f8ba; }

/* Global */
.text-green,
.text-green:hover { color: #0a4f16; }
.text-green-2,
.text-green-2:hover { color: #046f16; }
.text-yellow-2, 
.text-yellow-2:hover { color: #fff600; }
.text-orange,
.text-orange:hover { color: #f18538; }

.bg-orange-degrade { background: url(../../img/bg-btn.webp); background-position: center; background-repeat: repeat-x; }
.border-orange { border-color: #f18538; }

.bg-green { background-color: #0a4f16; }
.bg-green-2 { background-color: #046f16; }
.bg-orange { background: #f18538; }

.btn-yellow { background: #f5a329; }

.fw-5 { font-weight: 500; }
.fw-7 { font-weight: 700; }
.fw-8 { font-weight: 800; }

/* Topo */
header form#search input { z-index: 2; background-color: #f4f4f4; }
header form#search button { top: 3px; right: 3px; }
header img#clover-left { z-index: 1; bottom: -30px; }

.navbar { border-bottom: 10px solid #f18538; }
.navbar .active { font-weight: 700; }
.navbar .active::after { content: ""; position: absolute; width: 100%; left: 0; bottom: 0px; border-bottom: 2px solid #FFF; }
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus { outline: none; box-shadow: none; }
.navbar .navbar-toggler.icon { background-color: transparent; position: relative; cursor: pointer; height: 34px; width: 34px; padding: 0; border: 0; }
.navbar .navbar-toggler.icon span { display: block; position: absolute; left: 0; width: 34px; height: 4px; border-radius: 5px; background-color: #FFFFFF; -webkit-transition: -webkit-transform 0.3s; -webkit-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out; }
.navbar .navbar-toggler.icon span:first-child { top: 5px; }
.navbar .navbar-toggler.icon span:nth-child(2) { top: 15px; }
.navbar .navbar-toggler.icon span:last-child { top: 25px; }
.navbar .navbar-toggler.icon--active span:first-child { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);  position: absolute; top: 15px; }
.navbar .navbar-toggler.icon--active span:nth-child(2) { opacity: 0; }
.navbar .navbar-toggler.icon--active span:last-child { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 15px; }

@media (min-width: 992px) {
    header .navbar .nav-item { border-right: 1px solid #f4f4f4; }
    header .navbar .nav-item:last-child { border: 0px; }       
}

@media (max-width: 575.98px) {
    header img#clover-left { bottom: 0px; }
}

/* Banners */
#banners { background: url(../../img/bg-banners.webp); background-position: center top; background-size: cover; padding-bottom: 8rem!important; }

#banners #sweepstakes .swiper-button-prev { left: -10px; }
#banners #sweepstakes .swiper-button-prev,
#banners #sweepstakes .swiper-button-next { top: 35px; }
#banners #sweepstakes .swiper-button-next { right: -15px; }
#banners #sweepstakes .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,15px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,15px)); }
#banners #sweepstakes .swiper-pagination-bullet-active { background: #f18538; }

#banners #left-banner img.mobile { border-top-left-radius: 1.25rem!important; border-top-right-radius: 1.25rem!important; }
#banners #left-banner img.mobile,
#banners #left-banner img.desktop { object-fit: cover; }                
#banners #left-banner img.desktop { border-bottom-left-radius: 1.25rem!important; border-top-left-radius: 1.25rem!important; }
#banners #left-banner .swiper-pagination-bullet { background: #f18538; opacity: var(--swiper-pagination-bullet-opacity, 1); width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,15px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,15px)); }
#banners #left-banner .swiper-pagination-bullet-active { background: #046f16; }
#banners #left-banner .card { border-radius: 1.25rem; }

@media (min-width: 1200px) {
    #banners #left-banner img.desktop { height: 337px; } 
}

@media (min-width: 768px) {
    #banners #left-banner .swiper-pagination-bullets { bottom: 20px; left: 35px; }
}

@media (max-width: 1199.98px) { 
    #banners #left-banner img.desktop,
    #banners #left-banner img.mobile { height: 354px; }   
}

/* Próximos Bolões */
#next-draws { margin-top: -5.3rem!important; }
#next-draws .card { border-radius: 1.25rem; }
#next-draws .card img#clover { top: -45px; right: 115px; }
#next-draws .card .border-right { border-right: 1px solid rgba(0,0,0,.125); }
#next-draws .card .card-footer img { width: 40px; height: 40px; }

@media (max-width: 991.98px) {
    #next-draws { margin-top: -4.3rem!important; }
    #next-draws .card img#clover { right: 0px; }
    #next-draws .card .border-right { border-right: 0px; }
}

/* Ganhadores */
#winners .card { border-radius: 1.25rem; background: url(../../img/bg-card-winners.webp); background-repeat: repeat-x; background-position: center; }
#winners .swiper-button-prev { left: -10px; }
#winners .swiper-button-prev,
#winners .swiper-button-next { top: 44%; }
#winners .swiper-button-next { right: -10px; }

@media (max-width: 991.98px) {

    #winners .swiper-button-prev,
    #winners .swiper-button-next { top: 40%; }
}

@media (max-width: 767.98px) {

    #winners .swiper-button-prev,
    #winners .swiper-button-next { top: 38%; }
}

/* Depoimentos */
#depositions .card { border-radius: 1.25rem; background-color: #ebb21a; }
#depositions .swiper-button-prev { left: -10px; }
#depositions .swiper-button-prev,
#depositions .swiper-button-next { top: 44%; }
#depositions .swiper-button-next { right: -10px; }

@media (max-width: 991.98px) {

    #depositions .swiper-button-prev,
    #depositions .swiper-button-next { top: 40%; }
}

@media (max-width: 767.98px) {

    #depositions .swiper-button-prev,
    #depositions .swiper-button-next { top: 38%; }
}

/* Telegram */
#telegram .card p { bottom: -60px; }
#telegram .card-desktop img { left: -40px; top: -40px; }                    
#telegram .card-desktop,
#telegram .card-mobile { background: url(../../img/bg-card-telegram.webp); }
#telegram .card-mobile img { margin-left: -40px; margin-top: -110px; }

/* Seja um Afiliado */
footer { background: url(../../img/bg-footer.webp); background-position: center bottom; background-repeat: repeat-x; }
footer #affiliate { margin-top: -20px; }
footer #affiliate #left { background: url(../../img/bg-left-affiliate.webp); background-repeat: no-repeat; background-position: left bottom; }
footer #affiliate #left img { position: absolute; bottom: -15px; left: 0px; z-index: 3; height: 300px; }
footer #affiliate #center { background: url(../../img/bg-affiliate.webp); background-position: bottom; background-repeat: repeat-x; }
footer #affiliate #center legend { line-height: 1.2; letter-spacing: -1px; }
footer #affiliate #right { background: url(../../img/bg-right-affiliate.webp); background-repeat: no-repeat; background-position: right bottom; }
footer #affiliate #right img { position: absolute; z-index: 1; top: -30px; right: 0px; height: 366px; }

@media (min-width: 768px) {
    footer #affiliate::before { content: ""; width: 182px; height: 20px; position: absolute; background: url(../../img/bg-left-affiliate.webp); background-position: top left; background-color: #e4f8ba; }                
    footer #affiliate::after { content: ""; width: 182px; height: 20px; position: absolute; right: 12px; background: url(../../img/bg-right-affiliate.webp); background-position: top right; background-color: #e4f8ba; }    
}

@media (max-width: 1199.98px) {
    footer #affiliate #left img,
    footer #affiliate #right img { height: 260px; }
}

@media (max-width: 991.98px) {
    footer #affiliate #left img,
    footer #affiliate #right img { height: 215px; }
}

@media (max-width: 767.98px) { 
    footer #affiliate #left img,
    footer #affiliate #right img { height: 115px; }    
}

@media (max-width: 575.98px) {
    footer #affiliate #left img,
    footer #affiliate #right img { height: 85px; }
    footer #affiliate #right img { top: 0px; right: 0px; }
}

@media (max-width: 400.98px) {
    footer #affiliate #center legend { font-size: 1.28rem; }
}

@media (max-width: 375.98px) {        
    footer #affiliate #center legend { font-size: 1.15rem; line-height: 1.4; }
    footer #affiliate #left img,
    footer #affiliate #right img { height: 70px; }                
    footer #affiliate #right img { right: 0px; }
}

/* Rodapé */
footer hr { width: 1px; right: 25px; opacity: 1; }
@media (max-width: 767.98px) {

    footer img#logo-footer { width: 160px; }
}