@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --resizer: 1920;
}

@media (max-width: 750px) {
    :root {
        --resizer: 390;
    }
}

/* calc(156vw / var(--resizer) * 100) */

body {
    background: rgba(22, 25, 28, 1);
    font-family: "Roboto", sans-serif;
}

.container {
    margin: 0 auto;
    width: calc(1160vw / var(--resizer) * 100);
    max-width: 100%;
}

@media (max-width: 750px) {
    .container {
        width: calc(360vw / var(--resizer) * 100);
    }
}

header {
    padding: calc(16.5vw / var(--resizer) * 100) 0;
    background: rgba(27, 29, 32, 1);
}

header .row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

header .row .logo {
    display: flex;
    margin: 0 calc(28vw / var(--resizer) * 100) 0 0;
    width: calc(139vw / var(--resizer) * 100);
    height: calc(50vw / var(--resizer) * 100);
    text-decoration: none;
}

@media (max-width: 750px) {
    header .row .logo {
        margin: 0 calc(20vw / var(--resizer) * 100) 0 0;
    }
}

header .row a img {
    width: inherit;
    height: inherit;
}

header .row p {
    font-size: calc(20.8vw / var(--resizer) * 100);
    font-weight: 600;
    line-height: calc(33.28vw / var(--resizer) * 100);
    text-align: left;
    color: rgba(246, 246, 247, 1);
}

@media (max-width: 750px) {
    header .row p {
        font-size: calc(16vw / var(--resizer) * 100);
        line-height: calc(19vw / var(--resizer) * 100);
    }
}

main {
    display: flex;
    flex-direction: column;
}

.intro {
    padding: calc(59vw / var(--resizer) * 100) 0;
    background: linear-gradient(180.00deg, rgba(36, 40, 45, 1) 0%,rgba(38, 72, 241, 1) 100%);
}

@media (max-width: 750px) {
    .intro {
        margin: calc(32vw / var(--resizer) * 100) 0 0 0;
        padding: calc(72vw / var(--resizer) * 100) 0 calc(85vw / var(--resizer) * 100) 0;
    }
}

.intro .row {
    display: flex;
    flex-direction: column;
    gap: calc(10vw / var(--resizer) * 100);
    width: calc(746vw / var(--resizer) * 100);
    margin: 0 auto;
}

@media (max-width: 750px) {
    .intro .row {
        width: calc(336vw / var(--resizer) * 100);
    }
}

.intro h1 {
    font-size: calc(56vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(56vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

@media (max-width: 750px) {
    .intro h1 {
        font-size: calc(30vw / var(--resizer) * 100);
        line-height: calc(36vw / var(--resizer) * 100);
    }
}

.intro p {
    font-size: calc(20.8vw / var(--resizer) * 100);
    font-weight: 400;
    line-height: calc(27vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

@media (max-width: 750px) {
    .intro p {
        font-size: calc(16vw / var(--resizer) * 100);
        line-height: calc(28.8vw / var(--resizer) * 100);
    }
}

.current-promotions {
    padding: calc(206vw / var(--resizer) * 100) 0 calc(108vw / var(--resizer) * 100) 0;
}

@media (max-width: 750px) {
    .current-promotions {
        padding: calc(155vw / var(--resizer) * 100) 0 calc(30vw / var(--resizer) * 100) 0;
    }
}

.current-promotions .row {
    display: flex;
    flex-direction: column;
}

.current-promotions h2 {
    margin: 0 0 calc(27.19vw / var(--resizer) * 100) 0;
    font-size: calc(32vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(51.2vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(246, 246, 247, 1);
}

@media (max-width: 750px) {
    .current-promotions h2 {
        margin: 0 0 calc(25.41vw / var(--resizer) * 100) 0;
        font-size: calc(24vw / var(--resizer) * 100);
        line-height: calc(38.4vw / var(--resizer) * 100);
    }
}

.current-promotions img {
    width: 70%;
    height: auto;
    align-self: center;
}

@media (max-width: 750px) {
    .current-promotions img {
        width: 100%;
        border-radius: calc(24vw / var(--resizer) * 100);
    }
}

.popular-games {
    padding: calc(10vw / var(--resizer) * 100) 0;
}

.popular-games .row {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: calc(20vw / var(--resizer) * 100);
    border-radius: calc(24vw / var(--resizer) * 100);
    background: rgba(255, 255, 255, 1);
    gap: calc(16vw / var(--resizer) * 100);
}

@media (max-width: 750px) {
    .popular-games .row {
        padding: calc(15vw / var(--resizer) * 100);
        gap: 0
    }
}

.popular-games h2 {
    font-size: calc(24vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(31.2vw / var(--resizer) * 100);
    text-align: left;
    color: rgba(29, 35, 41, 1);
}

@media (max-width: 750px) {
    .popular-games h2 {
        margin: 0 0 calc(15vw / var(--resizer) * 100) 0;
        font-size: calc(20vw / var(--resizer) * 100);
        line-height: calc(26vw / var(--resizer) * 100);
    }
}

.popular-games .subrow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: calc(10vw / var(--resizer) * 100);
}

@media (max-width: 750px) {
    .popular-games .subrow {
        margin: 0 0 calc(30vw / var(--resizer) * 100) 0;
        overflow: auto;
    }
}

.popular-games .item {
    display: flex;
    align-items: center;
    padding: calc(12vw / var(--resizer) * 100);
    border: calc(1vw / var(--resizer) * 100) solid rgba(222, 223, 226, 1);
    border-radius: calc(16vw / var(--resizer) * 100);
    background: rgba(246, 246, 247, 1);
}

@media (max-width: 750px) {
    .popular-games .item {
        width: max-content;
    }
}

.popular-games .item img {
    margin: 0 calc(8vw / var(--resizer) * 100) 0 0;
    width: calc(30vw / var(--resizer) * 100);
    height: calc(30vw / var(--resizer) * 100);
}

.popular-games .item p {
    font-size: calc(14vw / var(--resizer) * 100);
    font-weight: 600;
    line-height: calc(22.4vw / var(--resizer) * 100);
    text-align: left;
    color: rgba(29, 35, 41, 1);
}

.popular-games span {
    font-size: calc(12vw / var(--resizer) * 100);
    font-weight: 400;
    line-height: calc(17.4vw / var(--resizer) * 100);
    text-align: left;
    color: rgba(110, 110, 110, 1);
}

.popular-slots {
    padding: calc(26vw / var(--resizer) * 100) 0;
}

@media (max-width: 750px) {
    .popular-slots {
        padding: calc(18vw / var(--resizer) * 100) 0;
    } 
}

.popular-slots .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(32vw / var(--resizer) * 100);
}

@media (max-width: 750px) {
    .popular-slots .row {
        grid-template-columns: repeat(1, 1fr);
    }
}

.popular-slots .item {
    display: flex;
    flex-direction: column;
    border-radius: calc(24vw / var(--resizer) * 100);
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
    gap: calc(22vw / var(--resizer) * 100);
}

.popular-slots .item-head {
    display: flex;
    align-items: center;
    padding: calc(27vw / var(--resizer) * 100) calc(24vw / var(--resizer) * 100);
    background: linear-gradient(167.25deg, rgba(248, 248, 248, 1) 0%,rgba(255, 255, 255, 1) 100%);
}

.popular-slots .item-head-img {
    margin: 0 calc(16vw / var(--resizer) * 100) 0 0;
    width: calc(70vw / var(--resizer) * 100);
    height: calc(70vw / var(--resizer) * 100);
}

.popular-slots .item-head-row {
    display: flex;
    flex-direction: column;
}

.popular-slots .item-head-row p {
    font-size: calc(22.4vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(35.84vw / var(--resizer) * 100);
    text-align: left;
    color: rgba(38, 91, 241, 1);
    flex: 1;
}

.popular-slots .item-head-subrow {
    display: flex;
    align-items: center;
}

.popular-slots .item-head-star {
    margin: 0 calc(7vw / var(--resizer) * 100) 0 0;
    width: calc(121vw / var(--resizer) * 100);
    height: calc(21vw / var(--resizer) * 100);
}

.popular-slots .item-head-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(6vw / var(--resizer) * 100) calc(12vw / var(--resizer) * 100);

    color: rgba(255, 255, 255, 1);
    font-size: calc(14.4vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(23.04vw / var(--resizer) * 100);
    text-align: center;
    border-radius: calc(20vw / var(--resizer) * 100);
    background: linear-gradient(179.59deg, rgba(249, 181, 50, 1) 0%,rgba(255, 194.26, 77.24, 1) 100%);  
}

.popular-slots .item-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16vw / var(--resizer) * 100);
    padding: 0 calc(24vw / var(--resizer) * 100);
}

@media (max-width: 750px) {
    .popular-slots .item-details {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 750px) {
    .popular-slots .container {
        width: 100%;
    }
}

.popular-slots .item-details-detail {
    display: flex;
    align-items: center;
    padding: calc(8vw / var(--resizer) * 100) calc(11vw / var(--resizer) * 100);
    border-radius: calc(16vw / var(--resizer) * 100);
    background: rgba(248, 248, 248, 0.7);
}

.popular-slots .item-details-detail img {
    margin: 0 calc(7.6vw / var(--resizer) * 100) 0 0;
    width: calc(21vw / var(--resizer) * 100);
    height: calc(20vw / var(--resizer) * 100);
}

.popular-slots .item-details-detail p {
    font-size: calc(14.4vw / var(--resizer) * 100);;
    font-weight: 400;
    line-height: calc(23.04vw / var(--resizer) * 100);;
    text-align: left;
    color: rgba(29, 35, 41, 1);
}

.popular-slots .item-bonus {
    display: flex;
    flex-direction: column;
    margin: 0 calc(26vw / var(--resizer) * 100);
    padding: calc(22vw / var(--resizer) * 100) 0;
    border-radius: calc(16vw / var(--resizer) * 100);
    gap: calc(12vw / var(--resizer) * 100);
    background: linear-gradient(180.00deg, rgba(36, 40, 45, 1) 0%,rgba(38, 72, 241, 1) 100%),linear-gradient(177.53deg, rgba(38, 114, 241, 1) 0%,rgba(38, 74, 241, 1) 100%);
}

.popular-slots .item-bonus-b {
    font-size: calc(28.8vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(46.08vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(255, 200, 95, 1);
}

.popular-slots .item-bonus-t {
    font-size: calc(14.4vw / var(--resizer) * 100);
    font-weight: 400;
    line-height: calc(14.04vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

.popular-slots .item-bonus p:last-child span {
    font-weight: 700;
}

.popular-slots .item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 calc(26vw / var(--resizer) * 100) calc(26vw / var(--resizer) * 100) calc(26vw / var(--resizer) * 100);
    padding: calc(17vw / var(--resizer) * 100) calc(5vw / var(--resizer) * 100);
    border-radius: calc(26.55vw / var(--resizer) * 100);
    color:rgba(255, 255, 255, 1);
    font-size: calc(15.2vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(24.32vw / var(--resizer) * 100);
    letter-spacing: calc(0.5vw / var(--resizer) * 100);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background: linear-gradient(177.53deg, rgba(38, 114, 241, 1) 0%,rgba(38, 74, 241, 1) 100%);
    transition: .3s opacity linear;
}

.popular-slots .item-btn:hover {
    opacity: .8;
}

.comparison-of-conditions {
    padding: calc(40vw / var(--resizer) * 100) 0;
}

.comparison-of-conditions .row {
    display: flex;
    flex-direction: column;
    padding: calc(49vw / var(--resizer) * 100) calc(42vw / var(--resizer) * 100) calc(74vw / var(--resizer) * 100) calc(42vw / var(--resizer) * 100);
    border-radius: calc(24vw / var(--resizer) * 100);
    background: rgba(255, 255, 255, 1);
}

.comparison-of-conditions h2 {
    font-size: calc(35.2vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(56.32vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(38, 91, 241, 1);
}

.cOfC {
    display: flex;
    flex-direction: column;
    margin: calc(39vw / var(--resizer) * 100) 0 0 0;
    width: calc(1076vw / var(--resizer) * 100);
}

/* @media (max-width: 750px) {
    .cOfC {
        width: 100%;
    }
} */

.cOfC-top {
    display: flex;
    background: linear-gradient(177.53deg, rgba(38, 114, 241, 1) 0%,rgba(38, 74, 241, 1) 100%);
    border-radius: calc(24vw / var(--resizer) * 100) calc(24vw / var(--resizer) * 100) 0 0;
}

.cOfC-top-section {
    display: flex;
    align-items: center;
    padding: calc(23vw / var(--resizer) * 100) 0 calc(23vw / var(--resizer) * 100) calc(16vw / var(--resizer) * 100);
}

.cOfC-top-section p {
    font-size: calc(15.2vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(24.32vw / var(--resizer) * 100);
    letter-spacing: calc(0.5vw / var(--resizer) * 100);
    text-align: left;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
}

.--cOfC-1 {
    width: calc(137.69vw / var(--resizer) * 100);
}

.--cOfC-2 {
    width: calc(124.08vw / var(--resizer) * 100);
}

.--cOfC-3 {
    width: calc(227.05vw / var(--resizer) * 100);
}

.--cOfC-4 {
    width: calc(160.67vw / var(--resizer) * 100);
}

.--cOfC-5 {
    width: calc(127.33vw / var(--resizer) * 100);
}

.--cOfC-6 {
    width: calc(161.08vw / var(--resizer) * 100);
}

.--cOfC-7 {
    width: calc(138.11vw / var(--resizer) * 100);
}

/* @media (max-width: 750px) {
    .--cOfC-4,
    .--cOfC-5,
    .--cOfC-6,
    .--cOfC-7 {
        display: none;
    }
} */

.cOfC-row {
    display: flex;
}

.cOfC-row-section {
    padding: calc(27vw / var(--resizer) * 100) 0 calc(27vw / var(--resizer) * 100) calc(16vw / var(--resizer) * 100);
}

.cOfC-row-section p {
    font-size: calc(16vw / var(--resizer) * 100);
    font-weight: 400;
    line-height: calc(25.6vw / var(--resizer) * 100);
    text-align: left;
    color: rgba(29, 35, 41, 1);
}

.cOfC-row-section.--cOfC-1 p {
    font-weight: 700;
}

.cOfC-rating {
    padding: calc(6.5vw / var(--resizer) * 100) calc(14vw / var(--resizer) * 100);
    color: rgba(255, 255, 255, 1);
    font-size: calc(14vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(23vw / var(--resizer) * 100);
    text-align: center;
    border-radius: calc(16vw / var(--resizer) * 100);
    background: linear-gradient(179.59deg, rgba(249, 181, 50, 1) 0%,rgba(255, 194.26, 77.24, 1) 100%);
}

.cOfC-row-section.--cOfC-2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

@media (max-width: 750px) {
    .comparison-of-conditions .container {
        width: 100%;
    }

    .comparison-of-conditions .row {
        border-radius: 0;
        overflow: hidden;
    }

    .cOfC {
        width: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .cOfC-top,
    .cOfC-row {
        width: max-content;
        min-width: 100%;
        padding-right: calc(16vw / var(--resizer) * 100);
    }

    .cOfC-top-section p {
        font-size: calc(13vw / var(--resizer) * 100);
        line-height: calc(21vw / var(--resizer) * 100);
    }

    .cOfC-row-section p {
        font-size: calc(13vw / var(--resizer) * 100);
        line-height: calc(21vw / var(--resizer) * 100);
    }

    .--cOfC-2 {
        width: calc(80.08vw / var(--resizer) * 100);
    }   

    .cOfC-top-section {
        padding: calc(23vw / var(--resizer) * 100) 0 calc(23vw / var(--resizer) * 100) calc(5vw / var(--resizer) * 100);
    }

    .cOfC-row-section {
        padding: calc(27vw / var(--resizer) * 100) 0 calc(27vw / var(--resizer) * 100) calc(5vw / var(--resizer) * 100);
    }

    .--cOfC-1 {
        width: calc(118.69vw / var(--resizer) * 100);
    }

    .--cOfC-3 {
        width: calc(157.05vw / var(--resizer) * 100);
    }

    .--cOfC-4 {
        width: calc(80.67vw / var(--resizer) * 100);
    }
}

.how-to-choose {
    padding: calc(30vw / var(--resizer) * 100) 0;
}

.how-to-choose .row {
    display: flex;
    flex-direction: column;
    padding: calc(49vw / var(--resizer) * 100) calc(42vw / var(--resizer) * 100) calc(42vw / var(--resizer) * 100) calc(42vw / var(--resizer) * 100);
    border-radius: calc(24vw / var(--resizer) * 100);
    background: rgba(255, 255, 255, 1);
}

@media (max-width: 750px) {
    .how-to-choose .container {
        width: 100%;
    }

    .how-to-choose .row {
        border-radius: 0;
    }
}

.how-to-choose h2 {
    font-size: calc(35.2vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(56vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(38, 91, 241, 1);
}

.how-to-choose .subrow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: calc(55vw / var(--resizer) * 100) 0 0 0;
    gap: calc(32vw / var(--resizer) * 100);
}

@media (max-width: 750px) {
    .how-to-choose .subrow {
         grid-template-columns: repeat(1, 1fr);
    }
}

.how-to-choose .item {
    display: flex;
    flex-direction: column;
    padding: calc(32vw / var(--resizer) * 100);
    border: calc(1vw / var(--resizer) * 100) solid rgba(238, 238, 238, 1);
    border-radius: calc(24vw / var(--resizer) * 100);
    gap: calc(28vw / var(--resizer) * 100);
    background: linear-gradient(167.25deg, rgba(248, 248, 248, 1) 0%,rgba(255, 255, 255, 1) 100%);
}

.how-to-choose .item-count {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: calc(50vw / var(--resizer) * 100);
    height: calc(50vw / var(--resizer) * 100);
    border-radius: 100%;
    background: linear-gradient(177.53deg, rgba(38, 114, 241, 1) 0%,rgba(38, 74, 241, 1) 100%);
}

.how-to-choose .item-count span {
    font-size: calc(19.2vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(50vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

.how-to-choose .item-title {
    font-size: calc(20.8vw / var(--resizer) * 100);
    font-weight: 600;
    line-height: calc(33vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(38, 91, 241, 1);
}

.how-to-choose .item-text {
    font-size: calc(15.2vw / var(--resizer) * 100);
    font-weight: 400;
    line-height: calc(24vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(29, 35, 41, 1);
}

footer {
    margin: calc(80vw / var(--resizer) * 100) 0 0 0;
    padding: calc(80vw / var(--resizer) * 100) 0 calc(16vw / var(--resizer) * 100) 0;
    background: linear-gradient(177.53deg, rgba(38, 114, 241, 1) 0%,rgba(38, 74, 241, 1) 100%);
}

footer .row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-top: calc(1vw / var(--resizer) * 100) solid rgba(218, 165, 32, 0.3);
    background: rgba(0, 0, 0, 0.3);
}

footer p {
    padding: calc(27vw / var(--resizer) * 100) 0;
    font-size: calc(14.4vw / var(--resizer) * 100);
    font-weight: 400;
    line-height: calc(23vw / var(--resizer) * 100);
    color: rgba(255, 255, 255, 1);
}

@media (max-width: 750px) {
    footer p {
        text-align: center;
    }
}

.content {
    padding: calc(20vw / var(--resizer) * 100) 0;
}

.content .row {
    display: flex;
    flex-direction: column;
}

.content .row h2 {
    margin: calc(20vw / var(--resizer) * 100) 0 calc(10vw / var(--resizer) * 100) 0;
    font-size: calc(35vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(56vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(38, 91, 241, 1);
}

.content .row h3 {
    margin: calc(15vw / var(--resizer) * 100) 0 calc(10vw / var(--resizer) * 100) 0;
    font-size: calc(25vw / var(--resizer) * 100);
    font-weight: 700;
    line-height: calc(46vw / var(--resizer) * 100);
    text-align: center;
    color: rgba(38, 91, 241, 1);
}

.content .row ol,
.content .row ul {
    margin: 0 0 calc(10vw / var(--resizer) * 100) calc(10vw / var(--resizer) * 100);
    padding: 0;
    list-style-position: inside;
}

.content .row p {
    margin: 0 0 calc(10vw / var(--resizer) * 100) 0;
}

.content .row p,
.content .row li,
.content .row th,
.content .row td {
    font-size: calc(16vw / var(--resizer) * 100);
    font-weight: 400;
    line-height: calc(24vw / var(--resizer) * 100);
    text-align: center;
    color: #fff;
}

.content .row table {
    width: 100%;
    margin: 0 0 calc(10vw / var(--resizer) * 100) 0;
    border-collapse: collapse;
    border-radius: calc(12vw / var(--resizer) * 100);
    overflow: hidden;
}

.content .row th,
.content .row td {
    padding: calc(12vw / var(--resizer) * 100) calc(16vw / var(--resizer) * 100);
    border: calc(1vw / var(--resizer) * 100) solid rgba(255, 255, 255, 0.12);
}

.content .row th {
    background: linear-gradient(177.53deg, rgba(38, 114, 241, 1) 0%, rgba(38, 74, 241, 1) 100%);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: calc(0.5vw / var(--resizer) * 100);
}

.content .row tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 750px) {
    .content .row table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
    }

    .content .row th,
    .content .row td {
        white-space: nowrap;
    }
}