* {
    margin: 0;
    padding: 0;
}

body {
    padding: 0;
    margin: 0;
    background-color: #F1F3F7;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


html {
    scroll-behavior: smooth;
}

button {
    border: 0
}

h1,
h2,
h3,
h4,
h5,
p,
li,
button {
    margin: 0;
    font-family: "Roboto", sans-serif;
    padding: 0;
}

a {
    text-decoration: none;
    font-family: "Roboto", sans-serif;
}

.headerBack {
    background: linear-gradient(90deg, #0B1422 0%, #042D56 100%);
    border-bottom: 1px solid #375777
}

.headerWrap {

    max-width: 1780px;
    padding: 18px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;

}

.headerLink {

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

.headerIcon {
    width: 137.44px;
}

.headerButtonWrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.headerButtonLink {
    color: white;
    background-color: #FF5501;
    padding: 11px 49px;
    border-radius: 2px;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: normal;
    text-transform: uppercase;

}

.bannerBack {
    background: linear-gradient(180deg, #091D36 0%, #0B1525 100%);
    background-image: url('/assets/img/new_bg.webp');
    background-position: right;
    background-size: cover;
    position: relative;
}

.bannerWrap {
    display: flex;
    max-width: 1590px;
    
    padding: 50px 20px ;
    box-sizing: border-box;
    margin: 0 auto;
    align-items: center;
}

@media(min-width: 1180px){
    .bannerBack {
        aspect-ratio: 1920/781;
    }
    .bannerWrap {
        aspect-ratio: 1590/781;
        padding: 50px 20px 81px 20px;
    }
}
.bannerCont {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
    z-index: 1;

}

.bannerWithPalyers {
    position: relative;
   
}

/* .bannerWithPalyers::after {
    position: absolute;
    max-width: 1825px;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    z-index: 0;
    height: 100%;
    background-image: url('/assets/img/bannerPlayers.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;

} */


.qrImg {
    width: 295px;
}

.bannerTextCont {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.bannerSecTitle {
    font-family: "RobotoCondensed", sans-serif;
    color: #FF5501;
    font-weight: 700;
    font-size: 32px;
    line-height: normal;
    letter-spacing: normal;
    text-transform: uppercase;


}

.bannerTitle {

    color: white;
    font-weight: 700;
    font-size: 80px;
    line-height: 1.4;
    letter-spacing: normal;

}

.siteBody {
    display: flex;
    flex-direction: column;
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    gap: 50px;
}

.accordingWrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.accordingHeader {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;

}

.accordingTitle {
    color: black;
    font-weight: 600;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: normal;
    text-transform: uppercase;


}

.orangeDash {
    color: #FF5501;
}

.accordingBody {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.accordingBodyItem {
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.accordingBodyHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.accordingBodyImg {
    width: 23.38px;
}

.accordingBodyTitle {
    color: #FF5501;
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: normal;
    text-transform: uppercase;

}

.accordingItemsCont {
    display: flex;
    flex-direction: column;
    gap: 13px;


}

.accordingItem {
    padding: 12px;
    background-color: white;
    border-top: 2px solid #0B1422;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordingItemTitle {
    color: #0B1422;
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.accordingItemDesc {
    color: #0B1422;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: normal;

}


.tiktokWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;

    padding: 32px 20px;
    background: linear-gradient(180deg, #091D36 0%, #0B1525 100%);
    border-radius: 20px;

}

.tiktokHeaderTitle {
    color: white;
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: normal;
    text-transform: uppercase;

}

.tiktokWrapBody {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tiktokSecTitle {
    color: white;
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: normal;

}

.tiktokDesc {
    color: white;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: normal;

}

.orangeText {
    color: #FF5501;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: normal;

}

.tiktokCopyWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 2px;
    cursor: pointer;
    border: 2px dashed #FFFFFF;
   
}

.tiktokCopyText {

    font-family: 'RobotoCondensed', sans-serif;
    color: white;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: normal;
    vertical-align: middle;
    text-transform: uppercase;
    pointer-events: none;

   

}

.copyIcon {
    width: 21px;
    pointer-events: none;

}


.whyChooseWrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blockHeaderDesc {
    color: #375777;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: normal;

}

.whyChooseBody {
    display: flex;
    flex-direction: column;

}

.whyChooseItem {
    display: flex;
    align-items: flex-start;


    gap: 16px;
}

.whyIcon {
    width: 56px;
}

.whyItemTextBlock {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.whyItemTitle {
    font-family: 'RobotoCondensed', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: normal;
    text-transform: uppercase;

}

.whyItemDesc {
    color: #375777;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: normal;

}

.whyLine {
    height: 2px;
    background-color: #375777;
    opacity: 0.2;
    margin: 16px 0;
}


.joinWrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.joinBody {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.joinItem {
    display: flex;
    flex-direction: column;
    padding: 19px 20px;
    border-radius: 4px;
    border-top: 2px solid #0B1422;
    background-color: white;
}

.joinItemTitle {
    font-family: 'RobotoCondensed', sans-serif;
    color: #FF5501;
    font-weight: 700;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: normal;
    text-transform: uppercase;

}

.joinItemDesc {
color: #375777;
font-weight: 500;
font-size: 18px;
line-height: 140%;
letter-spacing: normal;

}

.featuresWrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(180deg, #091D36 0%, #0B1525 100%);
    border-radius: 20px;

}
.featuresHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}
.featuresTitle {
    color: white;
    font-family: 'RobotoCondensed', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

}
.featuresOrangeTitle {
    padding: 5px 10px;
    color: white;
    background-color: #FF5501;
    font-family: 'RobotoCondensed', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;
}
.featuresBody {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.feaLine {
    margin: 0 24px;
    width: 1px;
    background-color: #375777;
}
.featuresBodyItem {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    max-width: calc(25% - 10px);
    height: auto;
    object-fit: cover;
    
    flex: 1 1 calc(25% - 10px);
}
.feaImg {
    width: 56px;
}
.featuresBodyTitle {
    color: white;
    font-family: 'RobotoCondensed', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;


}


.whyFeaItem {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.whyFeaItemHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.whyFeaIcon {
    width: 28px;
}
.whyFeaTitle {
    font-family: 'RobotoCondensed', sans-serif;
font-weight: 600;
font-size: 22px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

}


.bodyBottomBack {
    background: linear-gradient(180deg, #091D36 0%, #0B1525 100%);
    border-bottom: 2px solid #FF5501
}
.bodyBottomPlayers {

    position: relative;
}
/* 
.bodyBottomPlayers::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    max-width: 1720px;
    left: 0;
    top: 0;
    background-image: url("/assets/img/bannerBottomImg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;

} */
.bodyBottomBanner {

    max-width: 1200px;
    padding: 83px 20px;
    box-sizing: border-box;
    margin: 0 auto;
 
}
.bannerBottomText {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 644px;
}
.bottomBannerTitle {
    font-family: 'RobotoCondensed', sans-serif;
    color: white;
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: normal;
    text-transform: uppercase;

}
.bottomBannerDesc {
color: white;
font-weight: 500;
font-size: 18px;
line-height: 140%;
letter-spacing: normal;

}

.orangeTextLight {
    color: #FF5501;
}

.footerWrapBack {
    background: linear-gradient(90deg, #0B1422 0%, #042D56 100%);
display: flex;
align-items: center;
justify-content: center;

}
.footerLogo {
    padding: 22px 20px;
}


.bannerButton {
    display: none;
    align-items: center;
    justify-content: center;

}
.accordingTitleWrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
}
.linkBunnerButton {
    background-color: #00D32E;
    padding: 5.5px 20px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    color: #0B1422;

font-weight: 700;
font-size: 20px;
line-height: 140%;
letter-spacing: normal;
text-transform: uppercase;
border-radius: 8px;

}

.banner-bootomLine {
    height: 2px;
    background-color: #375777;
    display: none;
}
.feaLine.hidden {
    display: none;
}
.bottomImgMob {
    display: none;
}

.accordingItemDesc.hidden {
    display: none;
}

.hidenBlock {
    position: fixed;
    display: none;
    bottom: 0;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(90deg, #0B1422 0%, #042D56 100%);
    animation: fadeIn 0.5s forwards;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}


.bannerButtonBottom {
    display: none;
}
@media(max-width: 991px){
    .accordingItemDesc.show {
        display: none;
    }
    .accordingItemDesc.hidden {
        display: flex;
    }
      .bannerBack {
        background-image: url('/assets/img/new_bob_back.webp');
        min-height: calc(var(--vh, 1vh) * 100 - 60px);
   
        background-position: center;
        box-sizing: border-box;
      }  
      .qrImg {
        display: none;
      }
      .bannerButton {
        display: flex;
    }

    .bannerCont {
       
        gap: 20px;
        min-height: calc(var(--vh, 1vh) * 100 - 60px);
        box-sizing: border-box;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        padding: 69px 20px 55px 20px;
    }

    .bannerTitle {

        font-weight: 700;
        font-size: 40px;
      
        letter-spacing: normal;
        

    }

    .bannerSecTitle {

        
        font-weight: 700;
        font-size: 18px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: uppercase;
        
         
    }
    .bannerWithPalyers {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
     

        box-sizing: border-box;
    }
    .bannerWrap {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
   
    }


    .headerButtonLink {
padding: 8px 48px;
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }
    .headerIcon {
        width: 98px;
    }
    .headerWrap {
        padding: 15px 20px;
    }

    .accordingTitle {
font-weight: 700;
font-size: 24px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }
    .accordingBodyTitle {

font-weight: 700;
font-size: 18px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }

    .accordingItemTitle {
        font-family: 'RobotoCondensed', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 140%;
        letter-spacing: normal;

    }
    .accordingItemDesc {

font-weight: 400;
font-size: 14px;
line-height: 140%;
letter-spacing: normal;

    }


    .tiktokHeaderTitle {

font-weight: 700;
font-size: 24px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }
    .bannerBottomText {
        width: 100%;
        max-width: 100%;
    }

    .tiktokSecTitle {
font-weight: 700;
font-size: 26px;
line-height: 100%;
letter-spacing: normal;

    }

    .tiktokDesc {

font-weight: 500;
font-size: 16px;
line-height: 140%;
letter-spacing: normal;

    }
    .blockHeaderDesc {

font-weight: 500;
font-size: 16px;
line-height: 140%;
letter-spacing: normal;

    }
    .whyItemTitle{
   
font-weight: 700;
font-size: 18px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }
    .whyItemDesc {

font-weight: 500;
font-size: 16px;
line-height: 140%;
letter-spacing: normal;

    }
    .joinItemDesc {

font-weight: 500;
font-size: 16px;
line-height: 140%;
letter-spacing: normal;

    }
    .featuresBody {
        flex-direction: column;
    }
    .featuresBodyItem {
        max-width: 100%;
        width: 100%;
    }
    .feaLine {
        width: 100%;
        height: 2px;
        margin: 16px 0;
    }
    .feaLine.hidden {
        display: block;
    }
    .featuresHeader {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .featuresWrap {
        width: calc(100vw);
        box-sizing: border-box;
        margin-left: -20px;
        border-radius: 0;
        padding: 32px 20px;
    }
    .tiktokWrap {
        width: calc(100vw);
        box-sizing: border-box;
        margin-left: -20px;
        border-radius: 0;
        padding: 32px 20px;
    }
    .featuresBodyItem {
        flex-direction: row;
        gap: 16px;
        align-items: center;
    
    }
    .featuresBodyTitle {

font-weight: 700;
font-size: 18px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }
    .whyFeaTitle {

font-weight: 700;
font-size: 18px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }
    .banner-bootomLine {
        display: flex;
       
    }
    .bottomImgMob { 
        width: 100%;
        display: inline-block;
    }
    .bodyBottomPlayers::after{
        display: none;
    }
    .bodyBottomBanner {
        padding: 32px 20px 20px 20px;
        width: 100%;
    }
    .bodyBottomPlayers {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .bottomBannerTitle {

font-weight: 700;
font-size: 24px;
line-height: 100%;
letter-spacing: normal;
text-transform: uppercase;

    }
    .bottomBannerDesc {

font-weight: 500;
font-size: 16px;
line-height: 140%;
letter-spacing: normal;

    }
    .bannerButtonBottom {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bannerButtonBottom .linkBunnerButton {

font-weight: 700;
font-size: 17px;
line-height: 140%;
letter-spacing: normal;
text-transform: uppercase;
padding: 12px 20px;
box-sizing: border-box;
    }
    .bannerButtonBottom .linkBunnerButton .bannerButtonIcon {
        width: 45px;
    }
    .footerLogo {
        width: 96px;
        padding: 15px 20px;
    }
}