@import url('https://fonts.cdnfonts.com/css/evogria');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


.container > div, .partners, .steps {
    max-width: 1600px
}

h2, h4, h5, h6 {
    margin: 0
}

.logo, .spl {
    object-fit: contain;
    object-position: center
}

.btn-main, .more {
    border-radius: 6px;
    text-decoration: none
}

.league div, .more {
    white-space: nowrap
}

.leagues {
    text-align: center
}

.msg:nth-last-child(-n+3) {
    opacity: 1 !important
}

.message-left .message-text .line-3 {
    display: none
}

.container, .container > div {
    margin: auto;
    position: relative
}

.container, .main, .sp, .spinme, html {
    height: 100%
}

h4, h5 {
    line-height: 150%
}

* {
    box-sizing: border-box
}

body, html {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    font-family: 'Evogria', sans-serif;
    overflow-x: hidden
}

html {
    background-color: #050406;
    overscroll-behavior: none
}

h1 {
    font-size: 80px;
    font-weight: 400;
    font-family: 'Evogria', sans-serif;
    line-height: 110%;
    color: #fff;
    text-transform: uppercase;
    margin: 120px 0 16px;
}
h1.small{
    font-size: 64px;
}
h1 span{
    color: #FF073A;
}

.btn-main, .league, .leagues, .more, .spinme-left, .steps, h3 {
    color: #fff
}

h2 {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Evogria', sans-serif;
    line-height: normal;
    padding-block-end: 16px
}
h2.big{
    font-size: 48px;
    line-height: 120%;
    color: #fff;
}
h2.title{
    font-family: 'Poppins', sans-serif;
}
h3 {
    font-size: 24px
}

h3 {
    line-height: 24px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    margin: 24px 0;
}

h3 span {
    width: fit-content;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-family: 'Evogria', sans-serif;
    background-color: #FF073A;
    padding: 4px 12px;
    margin-block-start: 8px;
    border-radius: 40px;
    text-transform: uppercase;
}

.container {
    width: 100%;
    height: 800px;
    background: linear-gradient(90deg, rgba(5, 4, 6, 0.40) 32.91%, rgba(5, 4, 6, 0.11) 61.35%, rgba(5, 4, 6, 0.00) 67.09%), linear-gradient(0deg, #050406 0%, rgba(5, 4, 6, 0.00) 35%), url(../img/backgr.webp) lightgray 50% / cover no-repeat;
    background-position-y: 75%;
}

.container > div {
    padding: 48px 48px 160px;
    z-index: 2
}

.btn-main, .step, .steps {
    display: flex
}

.logo {
    height: 57px;
    width: 200px
}

.btn-main {
    width: fit-content;
    background: #CFFF04;
    padding: 8px 40px;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-family: 'Evogria', sans-serif;
    outline: 0;
    transition: .25s ease-in;
    border-radius: 50px;
    font-size: 24px;
    position: relative;
    color: #050406;
}

.btn-main span{
    position: absolute;
    inset-block-start: -10px;
    border-radius: 100px;
    background: linear-gradient(219deg, #8EEA68 9.05%, #0ED5CF 100%);
    color: var(--yyy-dark-blue-lvl-1, #323746);
    font-family: 'Evogria', sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0 12px;
}

.btn-transp{
    display: block;
    width: fit-content;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    padding: 8px 20px;
    margin: 20px 46px 0 auto;
    color: #CFFF04;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    transition: .25s all;
    background: transparent;
}
.btn-transp:hover{
    box-shadow: 0 0 0.9375rem 0 #cfff04;
}

.banner{
    width: 100%;
    max-width: 740px;
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 24px;
    border-radius: 24px;
    background: linear-gradient(90deg, #F02 0%, #FF075E 100%);
    margin: 0 auto;
}
.banner h2{
    text-transform: uppercase;
    color: #fff;
    padding-block-end: 8px;
}
.banner h2 span{
    color: #050406;
}
.banner-text{
    font-size: 18px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}
.banner-img{
    height: auto;
    width: 100%;
    max-width: 216px;
}

.title, .title-semibold, h5.big, h5.small{
    padding: 0 0 0 48px;
    color: #fff;
    margin-inline-start: auto !important;
    margin-inline-end: auto !important;
}
.title-semibold{
    font-weight: 600 !important;
    padding: 152px 48px 0;
}
.categories-outer{
    margin: 20px auto 0;
}
.categories{
    padding: 0 48px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 8px;
}
.categories img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    max-height: 384px;
    border-radius: 6px;
    box-shadow: 0px 9px 17px 0px rgba(16, 17, 25, 0.50);
}

.league, h4 {
    font-weight: 600
}

.btn-main:hover {
    background: #efffa9;
    box-shadow: 0 0 0.9375rem 0 #cfff04;
}

.leagues {
    padding: 80px 48px 110px
}
.leagues h2{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.leagues-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    padding-block-start: 14px;
    position: relative
}

.league {
    padding: 0 12px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    line-height: 28px;
    width: 25%
}

.league .league-inside {
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #292b37 0, #131316 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px
}

.league img {
    margin-inline-end: 16px;
    height: 30px;
    width: 50px
}

.leagues-row.bottom {
    justify-content: center
}

.leagues-row.bottom:after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    background: linear-gradient(180deg, rgba(13, 13, 15, 0) 0, #0d0d0f 100%)
}

.leagues-row.bottom .league {
    width: 18%
}

.more {
    margin: 48px auto 0;
}

.partners, .support, .support-inner {
    margin: auto;
    width: 100%;
}

.mw-1230{
    max-width: 1230px;
}

.steps {
    justify-content: space-between;
    align-items: center;
    padding: 3.5% 48px 64px;
    margin: auto;
}

.partners {
    display: block;
    padding: 0 40px 50px;
    max-width: 1230px;
    margin: auto;
}

.step > svg {
    width: fit-content;
    padding-inline-end: 10px
}

h4 {
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 140%;
}

h5.big, h5.small{
    font-size: 18px;
    margin: 8px 0 0;
    font-weight: 500;
    font-family: 'Evogria', sans-serif;
    color: #9698A1;
}

h5.small{
    font-size: 16px;
    margin: 0;
    padding: 24px 300px 0px 48px;
    vertical-align: middle;
}
h5.big{
    margin-block-start: 4px;
    font-family: 'Poppins', sans-serif;
}

h5, h6 {
    font-size: 16px
}

h5 {
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    line-height: 150%;
    color: #9698A1;
}

.footer {
    padding: 80px 48px 16px;
    color: #9698a1;
    margin: auto;
    text-align: center;
}
.footer p{
    font-family: 'Poppins', sans-serif !important;
}
.footer p span{
    font-weight: 700;
}

h6 {
    font-weight: 700;
    font-family: 'Evogria', sans-serif
}

p {
    font-weight: 400;
    font-family: 'Evogria', sans-serif;
    font-size: 16px;
    width: 100%;
    margin: 10px auto 0
}
p span{
    font-weight: 600;
}

.support {
    color: #fff;
    background: linear-gradient(0deg, rgba(30, 27, 33, 0.00) 0%, #1E1B21 50%, rgba(30, 27, 33, 0.00) 100%);
    padding-block-start: 64px;
}

.support-inner {
    max-width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 48px
}

.support-title {
    display: flex;
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif
}

.support-title svg {
    display: inline-block;
    margin-inline-end: 6px
}

#chat-body {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    pointer-events: none
}

#chat-body * {
    -ms-overflow-style: none;
    scrollbar-width: none
}

#chat-body ::-webkit-scrollbar {
    display: none
}

.chat ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.message-inner {
    position: relative;
    display: flex
}

.message-right .message-inner {
    flex-direction: row-reverse
}

.message-left .message-time {
    display: block;
    font-size: 12px;
    text-align: start;
    padding-inline-start: 30px;
    padding-block-start: 4px;
    color: #ccc
}

.message-right .message-time {
    display: block;
    font-size: 12px;
    text-align: right;
    padding-inline-end: 20px;
    padding-block-start: 4px;
    color: #ccc
}

.message-left {
    text-align: start;
    margin-block-end: 10px
}

.message-left .message-text {
    max-width: 160px;
    display: block;
    padding: 15px;
    font-size: 14px;
    color: #999;
    font-weight: 100;
    line-height: 1.5em;
    border-radius: 74px;
    position: relative;
    margin-inline-end: auto
}

.message-icon {
    display: block;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    margin-inline-end: 18px;
    position: relative
}

.message-text, .sp {
    background: #2b2c30;
    transition: .5s
}

.message-icon:before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100%;
    width: 100%;
    background-image: url("../img/headphone.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75%;
    background-color: #FF075E;
    border-radius: 50px;
}

.message-right .message-icon {
    margin-inline-end: 0;
    margin-inline-start: 18px
}

.message-right .message-icon:before {
    background-image: url("../img/user.svg")
}

.message-text {
    position: relative;
    border-radius: 74.089px;
    max-width: 160px;
    width: 100%;
    padding: 14px 22px
}

.message-right {
    text-align: right;
    margin-block-end: 10px
}

.message-right .message-text {
    display: block;
    font-size: 14px;
    color: #fff;
    border-radius: 30px;
    line-height: 1.5em;
    font-weight: 100;
    text-align: start
}

.message-text .line {
    content: '';
    height: 5px;
    background-color: #fff;
    border-radius: 2px;
    position: relative;
    display: block
}

.message-text .line-1 {
    width: 70%
}

.message-text .line-2 {
    width: 100%;
    margin-block-start: 6px
}

.message-text .line-3 {
    width: 55%;
    margin-block-start: 6px
}

.chat {
    border-radius: 30px;
    padding: 10px
}

.chat-container {
    height: 200px;
    overflow-y: scroll;
    padding-inline-end: 16px
}

.sp {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    border-radius: inherit
}

.spinme {
    display: flex;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 30px;
    line-height: 1.25em;
    font-weight: 100;
    align-items: center
}

.spinner {
    margin: 0;
    width: 30px;
    text-align: center
}

.spinner > div {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: 1.4s ease-in-out infinite both sk-bouncedelay;
    animation: 1.4s ease-in-out infinite both sk-bouncedelay;
    background: #fff
}

.spinner .bounce1 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

.spinner .bounce2 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}
.w-100 h5{
    padding: 0;
}
.video-outer{
    gap: 80px;
    padding: 100px 48px 0 !important;
}
.video-inner{
    height: 100%;
    width: 100%;
    position: relative;
}
#video{
    width: 100%;
    height: fit-content;
    max-height: 580px;
}
.video-overlay{
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100%;
    width: 100%;
    background-image: url(../img/video-img.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    user-select: none;
    cursor: pointer;
    transition: .25s all;
}
.video-title{
    color: #FFF;
    font-family: 'Evogria', sans-serif;
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
}
.video-description{
    margin: 8px 0 24px;
    color: #FF073A;
    font-family: 'Evogria', sans-serif;
    font-size: 48px;
    font-weight: 600;
}
.play-video{
    stroke: #fff;
    transition: .25s;
    fill: transparent;
}
.video-overlay:hover #center{
    fill: #fff;
}
.w-100{
    margin: auto;
    padding: 100px 48px 48px;
    display: flex;
}
.w-50{
    width: 50%;
}
.table > *{
    display: flex;
    margin-block-start: 4px;
    text-align: center;
    color: #fff;
    border-radius: 6px;
}
.table > div > *{
    width: 50%;
    position: relative;
    padding: 15px 0;
    display: flex;
    align-items: center;
    font-weight: 700;
}
.table > div > .text-red,
.table > .table-row-red > *{
    justify-content: center;
}
.table > div > *:first-of-type::before{
    content: '';
    display: block;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    height: 100%;
    width: 1px;
    background-color: #1C1E27;
}
.table-row-red{
    border-radius: 60px 60px 4px 4px;
    background: #FF073A;
    font-size: 18px;
    line-height: 133%;
    color: #1C1E27;
}
.table-row-grey{
    background-color: #323746;
    font-size: 16px;
}
.table-row-dark{
    background: #212633;
}
.table-num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    height: 30px;
    width: 30px;
    font-size: 16px;
    font-weight: 700;
    margin: 0 36px 0 70px;
    color: #9698A1;
    background: #323746;
}
.gold{
    background: linear-gradient(227deg, #FBE3A3 6.47%, #BA9D64 92.33%);
    color: #323746;
}
.silver{
    background: #F3F3F3;
    color: #323746;
}
.bronze{
    background: #BB8141;
    color: #323746;
}
.text-red{
    color: #FF073A;
    font-size: 16px;
}
.testimonials{
    margin: auto;
    padding: 48px 48px 16px 125px;
    overflow: hidden;
    position: relative;
}
.testimonials:before{
    content: '';
    display: block;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    height: 100%;
    width: 25px;
    background: linear-gradient(to right, rgba(13, 13, 15, 0) 0%, #1C1E27 99%);
    z-index: 1;
    pointer-events: none;
}
.slick-list{
    overflow: visible;
}
.slick-track{
    margin-inline-start: -100px;
}
.testimonial{
    width: max-content;
    max-width: 400px;
    padding-inline-start: 50px;
    position: relative;
    margin: 0 8px;
}
.testimonial-number{
    max-height: 118px;
    height: 100%;
    width: 50px;
    object-fit: cover;
    object-position: center left;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    transform: translate(0, -50%); 
}
.testimonial-inner{
    height: 100%;
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 24px 16px;
    background-color: #1C1E27;
    position: relative;
}
.testimonial-title{
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
    margin-block-end: 8px;
    font-size: 16px;
}
.testimonial-description{
    font-size: 14px;
    font-weight: 300;
    line-height: 115%;
    color: #9698A1;
    margin-block-end: 16px;
    min-height: 85px;
}
.testimonial-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.testimonial-author{
    display: flex;
    align-items: center;
    color: #9698A1;
    font-size: 12px;
    font-weight: 400;
    line-height: 110%;
}
.testimonial-author img{
    height: 24px;
    width: 24px;
    object-fit: contain;
    object-position: center;
    margin-inline-end: 6px;
}
/* .slick-track{
    margin: 0 -8px;
} */
.slick-slide{
    margin: 0 8px;
}
.slider-arrows{
    display: flex;
    margin: auto;
    padding: 0 48px;
    justify-content: flex-end;
    gap: 12px;
}
.slick-arrow{
    cursor: pointer;
    transition: .25s all;
}
.slick-disabled{
    opacity: .3;
}
.questions{
    padding: 48px 48px 0;
    margin: auto;
    color: #fff;
    display: grid;
    grid-template-columns: 40% auto;
    grid-column-gap: 24px;
}
.questions-title{
    font-size: 40px;
    font-weight: 700;
    line-height: 110%; /* 44px */
}
.questions-description{
    color: #FF073A;
    font-size: 18px;
    font-weight: 500;
    padding: 56px 0 16px;
}
.questions .btn-main{
    display: inline-block;
    font-size: 14px;
    padding: 10px 20px;
    height: fit-content;
}
.questions .btn-transparent{
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 10px 14px;
    margin-inline-start: 10px;
    transition: .25s all;
}
.questions .btn-transparent:hover{
    text-decoration: underline;
}
.questions .btn-transparent svg{
    margin-inline-start: 10px;
}
.questions-main{
    padding-block-start: 18px;
}
.accordion-item{
    padding: 32px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--yyy-white-10, rgba(255, 255, 255, 0.10));
    transition: .25s all;
}
.accordion-item.active svg #accordion-icon-path{
    display: none !important;
}
.accordion-item.active .accordion-description{
    display: block;
}
.accordion-item:last-of-type{
    border: none;
}
.accordion-title{
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    position: relative;
    padding-inline-end: 50px;
}
.accordion-icon{
    height: 26px;
    width: 26px;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    transform: translate(0, -50%);
}
.accordion-description{
    color: #9698A1;
    font-size: 18px;
    font-weight: 300;
    line-height: 125%;
    margin-block-start: 16px;
    overflow: hidden;
    display: none;
    transition: .25s all;
}
.accordion .questions-title{
    display: none;
}
.reviews svg{
    vertical-align: sub; 
    margin: 0 8px;
}
br.mobile{
    display: none;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 100%, 80% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1)
    }
}

@keyframes sk-bouncedelay {
    0%, 100%, 80% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@media screen and (max-width: 992px) {
    .container{
        height: auto;
    }
    .container > div {
        padding: 50px
    }

    h3 {
        font-size: 28px;
        margin: 8px 0 40px;
        max-width: 290px
    }

    .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 55px;
    }

    .step {
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
    }

    .step > svg {
        padding: 0
    }

    h5 br {
        display: block
    }

    .leagues {
        padding: 100px 20px 70px
    }

    .leagues-row {
        flex-direction: column;
        padding-block-start: 32px
    }

    .league {
        width: 100% !important;
        max-width: 300px;
        padding: 0;
        margin-block-end: 12px
    }

    .league .league-inside {
        justify-content: flex-start;
        padding: 12px 24px
    }

    .league img {
        height: 24px;
        width: 40px
    }

    .league div {
        font-size: 14px
    }

    .leagues-row.bottom {
        padding-block-start: 0
    }

    .more {
        margin: 28px auto 0
    }

    br.desktop{
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .container:after, .container:before {
        content: '';
        height: 250px;
        width: 100%;
        position: absolute;
        inset-inline-start: 0;
        pointer-events: none
    }

    h3, h4 {
        line-height: 20px
    }

    h4, h5 {
        padding-block-start: 10px
    }

    .container {
        background: none;
        background-image: url('../img/backgr-mob.webp?ver=2');
        background-position: center top;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .container:before {
        height: 15px;
        inset-block-start: 0;
        background: linear-gradient(to top, rgba(13, 13, 15, 0) 0%, #1C1E27 99%);
    }

    .container:after {
        height: 100%;
        inset-block-end: -1px;
        /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, #0d0d0f 100%) */
    }

    .container > div {
        padding: 10px 20px 56px
    }

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

    .logo {
        height: 52px;
        width: 108px;
        margin: auto;
    }

    h1 {
        font-size: 40px;
        margin: 75% 0 0;
        text-shadow: 0 5px 20px rgba(0, 0, 0, 0.7)
    }

    h3 br {
        display: none
    }

    h3 {
        font-size: 16px;
    }

    h3 span{
        margin-block-start: 5px;
        margin-inline-start: 4px;
    }

    .btn-main, h4 {
        /* font-size: 18px */
        padding: 8px 32px;
    }

    .btn-main span{
        font-size: 18px;
    }

    .spl {
        margin-block-start: 40px
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablets */
        grid-column-gap: 20px;
        row-gap: 24px;
    }

    .step svg {
        height: 32px;
        width: 32px
    }

    h5 {
        font-size: 11px;
        line-height: normal
    }

    h2 {
        font-size: 24px;
        padding: 0 32px
    }

    h2 br {
        display: block
    }

    .support {
        flex-direction: column-reverse;
    }

    .support-inner {
        flex-direction: column-reverse;
        padding: 0 20px
    }

    .support-title {
        font-size: 24px;
        padding-block-start: 20px;
        line-height: 30px
    }

    .chat-container {
        height: 150px
    }

    .message-left, .message-right {
        margin-block-end: 8px
    }

    .message-icon {
        height: 36px;
        width: 36px
    }

    .message-text {
        padding: 12px 18px !important
    }

    .message-text .line {
        height: 3px
    }

    .partners {
        padding: 0 0 20px
    }

    h6 {
        font-size: 10px
    }

    p {
        font-size: 8px
    }

    .banner-outer{
        padding: 0 20px;
    }
    .banner{
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 16px;
        margin: 48px auto 28px;
    }
    .banner h2{
        padding: 0 0 8px;
    }
    .banner-img{
        max-width: 144px;
    }
    .title, h5.big{
        padding: 0 20px;
        text-align: center;
    }
    .title{
        font-size: 20px;
    }
    h5.big{
        font-size: 12px;
    }
    .categories{
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }
    .categories img{
        height: 225px;
    }
    .video-outer{
        padding: 62px 15px 24px !important;
        flex-direction: column-reverse !important;
        gap: 24px;
    }
    .video-title{
        font-size: 26px;
    }
    .video-description{
        font-size: 16px;
        margin: 0 0 16px;
    }
    .play-video svg{
        height: 44px;
        width: 44px;
    }
    .title-semibold, .w-100{
        padding: 40px 15px 0;
    }
    h5.small{
        padding: 16px 15px 0;
    }
    .w-100{
        flex-direction: column;
    }
    .w-50{
        width: 100%;
    }
    h2.big{
        padding: 0;
        font-size: 22px;
    }
    .w-100 h5{
        padding: 8px 0 0;
        font-size: 14px;
    }
    .table{
        margin-block-start: 24px;
    }
    .table-row-red{
        font-size: 16px;
    }
    .table-row-grey{
        font-size: 14px;
    }
    .table > div:not(.table-row-red) > *:not(.text-red){
        justify-content: flex-start;
    }
    .table-num{
        margin: 0 16px;
    }
    .reviews{
        font-size: 16px;
        padding-block-start: 80px;
    }
    .reviews svg{
        height: 20px;
        width: 20px;
        margin: 0 6px;
    }
    .testimonials{
        padding: 16px 0 0 100px;
    }
    .testimonial{
        max-width: 300px;
    }
    .slick-list{
        overflow: visible;
    }
    .slick-track{
        margin-inline-start: -100px;
    }
    .testimonial-title{
        min-height: 38px;
    }
    .testimonial-description{
        min-height: 115px;
    }
    .slider-arrows{
        padding: 15px 15px 0;
    }
    .slider-arrows svg{
        height: 20px;
        width: 20px;
    }
    .questions{
        display: flex;
        flex-direction: column-reverse;
        padding: 48px 15px 0;
    }
    .questions-title{
        font-size: 32px;
    }
    .questions-description{
        padding: 48px 0 16px;
        font-size: 16px;
        display: inline-block;
    }
    .questions-title{
        display: none;
    }
    .questions-main{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    .accordion-item{
        padding: 24px 0;
    }
    .accordion-title{
        font-size: 16px;
    }
    .accordion-description{
        font-size: 14px;
    }
    .accordion-icon{
        height: 12px;
        width: 12px;
        inset-block-start: 25%;
    }
    .accordion .questions-title{
        display: block;
        padding-block-end: 16px;
    }
    .accordion-item:last-of-type{
        border-bottom: 1px solid var(--yyy-white-10, rgba(255, 255, 255, 0.10));
    }
    .questions .btn-transparent{
        display: none;
    }
    .footer{
        padding: 120px 20px 0;
    }
    .partners{
        padding: 0 12px 20px;
    }
    .footer p{
        font-size: 14px;
    }
    br.mobile{
        display: block;
    }
    .btn-transp{
        margin: 40px auto 0;
    }
}

@media screen and (max-width: 480px) {
    .steps {
        grid-template-columns: 1fr;
        /* single column on small phones */
        grid-column-gap: 0;
        row-gap: 20px;
    }

    .step {
        align-items: center;
        text-align: center;
    }
}