@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
:root { --flipclock-bg-color: #ffb700;
--flipclock-color: #010101;  --color-1: #010101;
--color-2: #6b0900;
--color-3: #9d0208;
--color-4: #e60000;
--color-5: #a55306;
--color-6: #ff9100;
--color-7: #e6a500;
--color-8: #ffb700;
--color-9: #e5e5e5;
--gradient-glass: linear-gradient(75deg, #d0000085, #ffb90896);
--gradient-1: radial-gradient(circle at center, var(--color-7), var(--color-1) 80%) !important;
--gradient-2: linear-gradient(to bottom, var(--color-8), var(--color-6)) !important;
--gradient-3: linear-gradient(to right, transparent, var(--color-1), var(--color-3), var(--color-1), transparent) !important;
--gradient-4: linear-gradient(to bottom, var(--color-4), var(--color-2)) !important;
--gradient-5: radial-gradient(circle at center, var(--color-2), var(--color-1) 80%) !important; } .bg-color-1 { background-color: var(--color-1) !important; }
.bg-color-2 { background-color: var(--color-2) !important; }
.bg-color-3 { background-color: var(--color-3) !important; }
.bg-color-4 { background-color: var(--color-4) !important; }
.bg-color-5 { background-color: var(--color-5) !important; }
.bg-color-6 { background-color: var(--color-6) !important; }
.bg-color-7 { background-color: var(--color-7) !important; }
.bg-color-8 { background-color: var(--color-8) !important; }
.bg-color-9 { background-color: var(--color-9) !important; }
.bg-gradient-glass {
background-color: transparent;
background-image: var(--gradient-glass);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.bg-gradient-1 { background-image: var(--gradient-1) !important; }
.bg-gradient-2 { background-image: var(--gradient-2) !important; }
.bg-gradient-3 { background-image: var(--gradient-3) !important; }
.bg-gradient-4 { background-image: var(--gradient-4) !important; }
.bg-gradient-5 { background-image: var(--gradient-5) !important; } .badge.badge-dark { background-color: var(--color-1) !important; }
.flip-clock-wrapper ul,
.flip-clock-wrapper ul li a div div.inn,
.flip-clock-divider .flip-clock-dot {
background-color: var(--flipclock-bg-color);
}
.flip-clock-wrapper ul li a div div.inn {
color: var(--flipclock-color);
}  body {
margin: 0;
padding: 0;
background-color: var(--color-1);
font-family: 'Rajdhani', sans-serif;
}
body.hide-scroll {
overflow-y: hidden;
}
button {
outline: none !important;
}
hr {
border-color: var(--color-6);
border-width: 5px;
border-style: dashed;
border-top: 0;
border-left: 0;
border-right: 0;
}
header {
display: block;
position: relative;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
z-index: 9;
}
header .logo-wrapper {
display: block;
position: relative;
margin: 0 auto;
max-width: 150px;
}
header .logo-wrapper .web-logo {
display: block;
position: relative;
width: 100%;
}
header .navbar-header .navbar-nav > .nav-item {
margin-bottom: 10px;
}
header .navbar-header .navbar-nav > .nav-item:last-child {
margin-bottom: 0;
}
header .navbar-header .navbar-nav > .nav-item > .nav-link {
position: relative;
padding: 0 15px;
background-color: var(--color-6);
border-radius: 50px;
color: var(--white);
font-size: 16px;
font-weight: 700;
line-height: 45px;
text-transform: uppercase;
}
header .navbar-header .navbar-nav > .nav-item > .nav-link::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 30px;
height: auto;
background-color: var(--color-5);
border-radius: 50px 0 0 50px;
}
header .navbar-header .navbar-nav > .nav-item > .nav-link::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 24px;
bottom: 0;
width: 15px;
height: auto;
background-color: var(--color-5);
transform: skewX(-15deg);
border-radius: 0 0 0 50px;
}
header .navbar-header .navbar-nav > .nav-item.active > .nav-link {
background-color: var(--color-4);
color: var(--color-8);
}
header .navbar-header .navbar-nav > .nav-item.active > .nav-link::before,
header .navbar-header .navbar-nav > .nav-item.active > .nav-link::after {
background-color: var(--color-3);
}
header .menu-wrapper {
display: block;
position: fixed;
top: 32px;
right: 0;
bottom: 0;
width: 300px;
height: auto;
padding: 10px 20px;
background-color: var(--white);
transform: translateX(150%);
transition: all .35s ease-in-out;
z-index: 2;
}
.checkbox-cta {
position: relative;
display: block;
top: 0;
left: 0;
margin: 0;
height: 26px;
width: 26px;
cursor: pointer;
opacity: 0;
z-index: 99;
}
.hamburger-lines {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-top: -26px;
height: 20px;
width: 26px;
z-index: 19;
}
.hamburger-lines .line {
display: block;
height: 3px;
width: 100%;
border-radius: 10px;
background: var(--color-1);
}
.hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.checkbox-cta:checked ~ .menu-wrapper {
transform: translateX(0);
}
.checkbox-cta:checked ~ .hamburger-lines .line1 {
transform: rotate(45deg);
}
.checkbox-cta:checked ~ .hamburger-lines .line2 {
transform: scaleY(0);
}
.checkbox-cta:checked ~ .hamburger-lines .line3 {
transform: rotate(-45deg);
}
section {
display: block;
position: relative;
}
section.content-wrapper {
display: block;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
section .lastdraw-wrapper {
display: block;
position: relative;
min-height: 300px;
background-image: linear-gradient(to bottom, #e60000, #ff0000e7, #e6000054);
}
section .content-separator {
display: block;
position: relative;
margin: 25px 0 15px;
width: auto;
height: 2px;
background-image: linear-gradient(to right, transparent, rgb(255, 255, 255), transparent);
}
section .banner-wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: rgba(0, 0, 0, 0.5);
}
section .banner-wrapper img {
display: block;
position: relative;
border: 5px solid var(--color-9) !important;
border-radius: 12px;
}
section .banner-wrapper .slider-title {
font-size: 13px;
}
footer {
display: block;
position: relative;
}
footer .footer-separator {
display: block;
position: relative;
margin: 25px 0 15px;
width: auto;
height: 1px;
background-image: linear-gradient(to right, transparent, rgba(11, 11, 11, 0.5), transparent);
}
footer .logo-wrapper {
display: block;
position: relative;
max-width: 200px;
}
footer .logo-wrapper img {
width: 100%;
}
footer .menu-wrapper .navbar .navbar-nav > .nav-item > .nav-link {
padding: 8px 0;
color: var(--color-1);
font-weight: 500;
}
.bg-gradient-glass {
display: block;
position: fixed;
inset: 0;
}
.splide__arrows {
display: flex;
justify-content: center;
align-items: center;
}
.splide__arrows .splide__arrow {
position: relative !important;
top: 0;
transform: translateY(50%) !important;
}
.splide__arrows .splide__arrow.splide__arrow--prev {
left: 0 !important;
}
.splide__arrows .splide__arrow.splide__arrow--next {
right: 0 !important;
}
.card.card-result {
position: relative;
border-radius: 12px;
}
.card.card-result .card-header .card-title {
display: block;
position: relative;
border-radius: 12px 0 20px 0;
font-size: 22px;
font-weight: 900;
z-index: 1;
}
.card.card-result .card-header .card-title::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -10px;
width: 60px;
height: auto;
background-color: var(--color-4);
border-radius: 0 0 12px 0;
transform: skewX(-12deg);
z-index: -1;
}
.card.card-block {
position: relative;
border-radius: 12px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.card.card-block .result-title {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 60px;
height: 50px;
background-color: var(--color-9);
border-radius: 0 50px 50px 0;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
font-size: 20px;
font-weight: 900 !important;
}
.card.card-result-small {
position: relative;
margin: 0 auto;
border-radius: 12px;
z-index: 1;
}
.card.card-result-small::before,
.card.card-result-small::after {
content: "";
display: block;
position: absolute;
bottom: -10px;
left: 10px;
right: 10px;
width: auto;
height: 10px;
background-color: var(--color-3);
border-radius: 0 0 100px 100px;
z-index: -1;
}
.card.card-result-small::after {
bottom: -20px;
left: 18px;
right: 18px;
background-color: var(--color-2);
}
.card.card-result-small .result-title {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 50px;
height: 50px;
background-color: var(--color-2);
border-radius: 0 50px 50px 0;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
font-size: 20px;
font-weight: 700;
}
.card-separator {
display: block;
position: relative;
height: 3px;
background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), var(--white), rgba(255, 255, 255, 0.5), transparent);
}
.prize-wrapper .prize-block {
position: relative;
margin: 0 1.5px;
width: 35px;
height: 35px;
border-radius: 50px;
background: radial-gradient(circle at center, var(--color-1), var(--color-1));
border: 1px solid var(--color-2);
color: var(--color-9);
}
.prize-wrapper .prize-block.winner {
background: radial-gradient(circle at center, var(--color-7), var(--color-5));
color: var(--color-1);
}
.prize-wrapper .prize-block.mini {
width: 22.5px;
height: 22.5px;
}
.prize-wrapper .prize-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
border-radius: 50%;
background: radial-gradient(circle at 25% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
z-index: 0;
}
.prize-wrapper .prize-block::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -10px;
width: auto;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
filter: blur(5px);
z-index: 0;
}
.prize-wrapper .prize-block .prize-digit {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
font-size: 22px;
font-weight: 700;
text-align: center;
}
.prize-wrapper .prize-block.mini .prize-digit {
font-size: 16px;
}
@media (min-width: 993px) {
header .logo-wrapper {
max-width: 150px;
}
header .navbar-header .navbar-nav > .nav-item {
margin-bottom: 0;
margin-right: 15px;
}
header .navbar-header .navbar-nav > .nav-item:last-child {
margin-right: 0;
}
header .navbar-header .navbar-nav > .nav-item > .nav-link {
min-width: 180px;
padding: 0 20px;
padding-left: 55px;
font-size: 16px;
font-weight: 700;
line-height: 45px;
}
header .menu-wrapper {
display: block;
position: relative;
top: unset;
right: unset;
bottom: unset;
width: auto;
height: auto;
padding: 0;
background-color: transparent;
transform: translateX(0);
}
.checkbox-cta, .hamburger-lines {
display: none;
}
section .lastdraw-wrapper {
min-width: 380px;
max-width: 380px;
width: 380px;
min-height: calc(100vh - 117px);
}
section .banner-wrapper .slider-title {
font-size: 40px !important;
}
footer .logo-wrapper {
max-width: 200px;
}
.prize-wrapper .prize-block,
.prize-wrapper .prize-block.mini {
width: 35px;
height: 35px;
}
.prize-wrapper .prize-block.mini .prize-digit {
font-size: 22px;
}
}
@media (min-width: 1200px) {
}