*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #0B0C38;
    font-family: "Manrope", sans-serif;
    font-weight:500;
}

h1,h2,h3,h4,h5{
    font-weight:700;
}
.hero {
    position: relative;
    background: url("../img/wave.webp") center top / cover no-repeat;
    overflow: hidden;
    padding-top: 90px;
}

.hero__content{
    max-width:1200px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;

    padding:70px 40px 0;
}

.hero h1{

    font-size:32px;
    line-height:1.2;
    color:#fff;
    margin-bottom:24px;
}

.hero p{

    font-size:18px;
    line-height:1.7;

    color:#B8B8B8;

    margin-bottom:36px;
}

.hero-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:54px;
    padding:0 36px;

    border-radius:999px;

    text-decoration:none;

    color:#111;

    font-weight:600;

    background:linear-gradient(
            90deg,
            #E5FE8C 15%,
            #8CF8F2 100%
    );

    transition:.3s;
}

.hero-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(140,248,242,.35);
}

.hero__right img{

    height:430px;

    animation:float 5s ease-in-out infinite;
}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0);
    }

}

.hero-wave{

    display:block;
    width:100%;
    margin-top:60px;
}


.hero__right{
    display: flex;
    justify-content: flex-end;
}
.demo-banner{

    position:relative;

    max-width:1200px;

    margin:70px auto;

    padding:70px 60px;

    overflow:visible;

    border-radius:15px;

    background:
            url("../img/background-banner-card.webp") center/cover no-repeat,
            #7007CC;

    text-align:center;
}

.demo-banner h2{

    color:#fff;

    font-size:32px;

    line-height:1.3;

    margin-bottom:22px;
}
.demo-banner p{

    color:#D7D7D7;

    font-size:18px;

    line-height:1.7;

    max-width:760px;

    margin:auto;
}
.banner-chip-big{

    position:absolute;

    left:-65px;

    top:35px;

    width:170px;

    animation:rotateFloat 9s ease-in-out infinite;
}
.banner-dice{

    position:absolute;

    right:-35px;

    top:-30px;

    width:120px;

    animation:rotateFloat 8s ease-in-out infinite reverse;
}
.banner-chip-small{

    position:absolute;

    left:40px;

    bottom:-35px;

    width:90px;

    animation:rotateFloat 10s ease-in-out infinite;
}
@keyframes rotateFloat{

    0%{

        transform:
                rotate(-7deg)
                translateY(0px);

    }

    50%{

        transform:
                rotate(7deg)
                translateY(-6px);

    }

    100%{

        transform:
                rotate(-7deg)
                translateY(0px);

    }

}
.demo-banner {
    position: relative;
    max-width: 1200px;

    margin: 70px auto;
    margin-left: 40px;
    margin-right: 40px;

    padding: 70px 80px;

    border-radius: 15px;
    overflow: visible;

    background:
            url("../img/background-banner-card.webp") center/cover no-repeat,
            #7007CC;
}
.demo-banner{
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 70px auto;
    padding: 70px 0;
}
.banner-chip-big{
    width: 153px;   /* було 170 */
}

.banner-dice{
    width: 108px;   /* було 120 */
}

.banner-chip-small{
    width: 81px;    /* було 90 */
}
.demo-banner__content{
    position: relative;
    z-index: 2;

    max-width: 760px;
    margin: 0 auto;

    padding: 0 90px;
}
.banner-chip-big,
.banner-dice,
.banner-chip-small{
    z-index: 1;
}

.demo-banner__content{
    z-index: 2;
}
.banner-chip-big{
    left: -50px;
}

.banner-dice{
    right: -25px;
}

.banner-chip-small{
    left: 25px;
}
.text-section{
    color: #ffffff;
    padding: 20px 40px;
}
.text-section h2{
    padding: 10px 0;
}
.text-section p{
    color: #B1B5D9;
    font-size: 18px;
    max-width: 650px;
}
.solutions{
    margin: 80px 40px;
}

.solutions-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.solution-card{

    --accent: #FF4A55;

    position: relative;

    padding: 34px;

    border: 1px solid transparent;
    border-radius: 16px;

    background:
            linear-gradient(#0D0F3E, #0D0F3E) padding-box,

            linear-gradient(
                    135deg,
                    var(--accent) 0%,
                    rgba(255,255,255,.12) 28%,
                    rgba(255,255,255,.08) 55%,
                    rgba(255,255,255,.08) 100%
            ) border-box;

    transition: .3s;
}

.solution-card--red{
    --accent: #FF4A55;
}

.solution-card--green{
    --accent: #4EF58B;
}

.solution-card__header{

    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 26px;
}

.solution-card__header img{
    width: 52px;
}

.solution-card h3{

    color: #fff;
    font-size: 20px;
    margin-bottom: 6px;
}

.solution-card span{

    color: #B9B9C8;
    font-size: 16px;
}

.solution-card hr{

    border: none;
    height: 1px;

    background: rgba(255,255,255,.12);

    margin: 0 20px 28px;
}

.solution-card p{

    color: #D0D0DA;

    font-size: 16px;
    line-height: 1.8;
}
.casino-divider{
    width: 100%;
    margin: 80px 0;
}

.casino-divider img{
    display: block;
    width: 100%;
    height: auto;
}

.providers{

    margin:100px 40px;
}

.providers__container{

    max-width:1200px;

    margin:0 auto;

    display:flex;

    align-items:center;

    gap:80px;
}

.providers__image{

    flex:1;
}

.providers__image img{

    width:100%;

    display:block;
}

.providers__content{

    flex:1;
}

.providers__content h2{

    color:#fff;

    font-size:20px;

    font-weight:600;

    margin-bottom:24px;
}

.providers__content hr{

    border:none;

    height:1px;

    background:rgba(255,255,255,.12);

    margin-bottom:28px;
}

.providers__content p{

    color:#D5D7EA;

    font-size:16px;

    line-height:1.9;
}
.footer{

    margin-top:120px;

    background:#090B2E;

    border-top:1px solid rgba(255,255,255,.08);
}

.footer__container{

    max-width:1200px;

    margin:0 auto;

    padding:70px 40px;

    display:flex;

    justify-content:space-between;

    gap:80px;
}

.footer__brand{

    max-width:320px;
}

.footer__logo{

    display:inline-block;

    text-decoration:none;

    font-size:34px;

    font-weight:700;

    color:#fff;

    margin-bottom:22px;
}

.footer__logo span{

    background:linear-gradient(90deg,#E5FE8C,#8CF8F2);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.footer__brand p{

    color:#BFC4E2;

    line-height:1.8;

    font-size:16px;
}

.footer__links{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:60px;
}

.footer__column{

    display:flex;

    flex-direction:column;
}

.footer__column h4{

    color:#fff;

    font-size:18px;

    margin-bottom:22px;
}

.footer__column a{

    color:#BFC4E2;

    text-decoration:none;

    margin-bottom:14px;

    transition:.25s;
    font-size: 13px;
}

.footer__column a:hover{

    color:#fff;

    transform:translateX(4px);
}

.footer__bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:24px;

    text-align:center;

    color:#9FA6D0;

    font-size:15px;
}
@media (max-width:991px){

    .footer__container{

        flex-direction:column;

        gap:60px;

        padding:60px 25px;
    }

    .footer__links{

        grid-template-columns:repeat(2,1fr);

        gap:40px;
    }

}
@media (max-width:576px){

    .footer__links{

        grid-template-columns:1fr;

        text-align:center;
    }

    .footer__brand{

        text-align:center;

        margin:0 auto;
    }

}
.header{

    position:fixed;

    top:20px;

    left:20px;

    right:20px;

    z-index:999;

    transition:
            transform .45s cubic-bezier(.22,.61,.36,1),
            background .3s;

}

.header.hide{

    transform:translateY(-140%);
}

.header__container{

    max-width:1240px;

    margin:auto;

    height:72px;

    padding:0 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-radius:18px;

    background:rgba(16,18,60,.65);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
            0 12px 40px rgba(0,0,0,.25);
}
.header__logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    font-size:30px;

    font-weight:700;

    color:white;
}

.header__logo::before{

    content:"";

    width:11px;

    height:11px;

    border-radius:50%;

    background:linear-gradient(135deg,#E5FE8C,#8CF8F2);

    box-shadow:
            0 0 15px rgba(140,248,242,.4);
}

.header__logo span{

    background:linear-gradient(135deg,#E5FE8C,#8CF8F2);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}
.language-switcher{

    position:relative;
}

.language-switcher__current{

    display:flex;

    align-items:center;

    gap:10px;

    background:transparent;

    border:none;

    color:white;

    cursor:pointer;

    font-size:15px;
}

.language-switcher__current img{

    width:28px;

    height:28px;

    border-radius:50%;
}

.language-switcher__menu{

    position:absolute;

    top:50px;

    right:0;

    min-width:120px;

    border-radius:14px;

    background:#181B55;

    border:1px solid rgba(255,255,255,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.3s;

    overflow:hidden;
}

.language-switcher:hover .language-switcher__menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.language-switcher__menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

    color:white;

    text-decoration:none;

    transition:.25s;
}

.language-switcher__menu a:hover{

    background:rgba(255,255,255,.06);
}

.language-switcher__menu img{

    width:24px;

    height:24px;

    border-radius:50%;
}


@media(max-width:768px){

    .header{

        top:12px;

        left:12px;

        right:12px;
    }

    .header__container{

        padding:0 18px;

        height:64px;
    }

    .header__logo{

        font-size:24px;
    }

    .language-switcher__current span{

        display:none;
    }

}
























@media(max-width:991px){

    .providers{

        margin:80px 20px;
    }

    .providers__container{

        flex-direction:column;

        gap:50px;

        text-align:center;
    }

    .providers__image{

        max-width:520px;
    }

    .providers__content{

        max-width:700px;
    }
}
@media (max-width: 991px){

    .providers{

        margin:80px 20px;
    }

    .providers__container{

        flex-direction:column;

        gap:50px;

        text-align:center;
    }

    .providers__image{

        width:100%;

        max-width:420px;

        margin:0 auto;
    }

    .providers__image img{

        width:100%;

        height:auto;

        display:block;
    }

    .providers__content{

        max-width:700px;

        margin:0 auto;
    }

}
@media (max-width: 576px){

    .providers__image{

        max-width:300px;
    }

    .providers__content h2{

        font-size:18px;
    }

    .providers__content p{

        font-size:15px;

        line-height:1.8;
    }

}
@media(max-width:900px){

    .solutions-grid{

        grid-template-columns:1fr;
    }
}
@media(max-width:600px){

    .solution-card{

        padding:26px;
    }

    .solution-card__header{

        align-items:flex-start;
    }

    .solution-card h3{

        font-size:18px;
    }

    .solution-card span{

        font-size:15px;
    }

    .solution-card p{

        font-size:15px;
    }
}
@media(max-width:991px){

    .demo-banner{

        padding:55px 30px;
    }

    .banner-chip-big{

        width:130px;
        left:-35px;
    }

    .banner-dice{

        width:90px;
    }

    .banner-chip-small{

        width:70px;
    }

}
@media(max-width:768px){

    .banner-chip-big,
    .banner-dice,
    .banner-chip-small{

        display:none;
    }
    .demo-banner__content{
        padding: 0;
    }
    .demo-banner{

        margin:40px 15px;
        padding:45px 25px;
    }

    .demo-banner h2{

        font-size:26px;
    }

    .demo-banner p{

        font-size:16px;
    }

}
@media(max-width:991px){

    .hero__content{

        flex-direction:column-reverse;

        text-align:center;

        padding-top:60px;
    }

    .hero__left{

        max-width:700px;
    }

    .hero__right img{

        height:300px;
    }

}







@media(max-width:576px){

    .hero h1{

        font-size:28px;
    }

    .hero p{

        font-size:16px;
    }

    .hero-btn{

        width:100%;
        max-width:260px;
    }

}