@font-face {
    font-family: 'Averta Demo';
    src: url('../fonts/AvertaDemo-Regular.eot');
    src: url('../fonts/AvertaDemo-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvertaDemo-Regular.woff2') format('woff2'),
        url('../fonts/AvertaDemo-Regular.woff') format('woff'),
        url('../fonts/AvertaDemo-Regular.ttf') format('truetype'),
        url('../fonts/AvertaDemo-Regular.svg#AvertaDemo-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta CY W01';
    src: url('../fonts/AvertaCYW01-Bold.eot');
    src: url('../fonts/AvertaCYW01-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvertaCYW01-Bold.woff2') format('woff2'),
        url('../fonts/AvertaCYW01-Bold.woff') format('woff'),
        url('../fonts/Averta-CY-W01-Bold.ttf') format('truetype'),
        url('../fonts/AvertaCYW01-Bold.svg#AvertaCYW01-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta';
    src: url('../fonts/Averta-Black.eot');
    src: url('../fonts/Averta-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Averta-Black.woff2') format('woff2'),
        url('../fonts/Averta-Black.woff') format('woff'),
        url('../fonts/Averta-Black.svg#Averta-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AvertaStd';
    src: url('../fonts/AvertaStd-ExtraBold.eot');
    src: url('../fonts/AvertaStd-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvertaStd-ExtraBold.woff2') format('woff2'),
        url('../fonts/AvertaStd-ExtraBold.woff') format('woff'),
        url('../fonts/AvertaStd-ExtraBold.ttf') format('truetype'),
        url('../fonts/AvertaStd-ExtraBold.svg#AvertaStd-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

h1, h2 {color: #fff;text-transform:uppercase;margin-bottom: 0;}
h1{letter-spacing: 1px;font-weight: 900;margin-bottom: 20px;font-family: 'Averta';
    font-size: 100px;line-height: 82px;}
h1 span, h4 span {color: #33CC99;}

h2 {
    font-size: 69px;
    line-height: 54px;
    letter-spacing: 1px;
}

p{font-size:30px;color:#fff;line-height:37px;}
ul li{font-size: 30px;line-height: 53px;letter-spacing: 1px;color: #33CC99;font-family: 'Averta CY W01';font-weight: bold;}
h4{color: #fff;font-size: 47px;line-height: 38px;letter-spacing: 2px;font-family: 'AvertaStd';font-weight: bold;}
a{text-decoration:none;}
.mob-img{display: none;}


/*---------------------- banner-section css start ----------------------*/
.header-logo img {max-width: 100px;width: 100%;}
.header-logo {
    margin-bottom: 20px;
}
.banner-section{padding:40px 0;background-image:url(../images/5X-trade.png);
    font-family: 'Averta Demo';background-repeat: no-repeat;background-size: cover;
    min-height: 100vh;
    overflow: hidden;overflow-y: auto;background-position: center;
}
.banner-section p{max-width:569px;width: 100%;margin-bottom: 24px;}
.banner-section h4{text-align: center;margin-bottom: 20px;}
.banner-section .telegram-link{display:flex;justify-content:center;}
.banner-section ul li{list-style: none;position: relative;padding-left: 45px;}
.banner-section ul li:before{content:"";background-image:url(../images/Rectangle-673.png);background-repeat:no-repeat;background-size:contain;width:23px;height:23px;position:absolute;left:0;top:50%;transform:translate(0,-50%);}
.banner-section ul{margin-bottom: 40px;}

/*---------------------- banner-section css end ----------------------*/



@media (max-width: 1699px) {

    ul li {
        font-size: 25px;
        line-height: 45px;
    }
    .banner-section ul li:before{
        width: 16px;
        height: 16px;
    }
    .banner-section {
        padding: 30px 0;
    }
}


@media only screen and (max-width: 1199px) {
    h1 {font-size: 85px;line-height: 80px;}
    h2 {font-size: 69px;line-height: 55px;}
    ul li {font-size: 25px;line-height: 49px;}
    .banner-section ul li:before{width: 15px;height: 15px;}
    h4{font-size: 40px;line-height: 35px;}
    .banner-section .telegram-link img.desktop-img {max-width: 300px;}
    .content-box {height: 75vh;display: flex;flex-direction: column;}
    .bottom-box {margin-top: auto;}
    ul {margin: 0;}
    .banner-section{background-position: bottom;background-image:url(../images/5X-trade-mob.png);}
}

@media only screen and (max-width: 991px) {
    h1 {font-size: 65px;line-height: 60px;}
    h2 {font-size: 50px;line-height: 55px;}
    p {font-size: 25px;line-height: 30px;}
    ul li {font-size: 20px;line-height: 40px;}
    .banner-section ul li:before {width: 11px;height: 11px;}
    h4 {font-size: 35px;line-height: 30px;}
    .content-box {height: 80vh;}
    .banner-section {padding: 20px 0 0;background-position: center;}
}

@media only screen and (max-width: 767px) {
    .mob-img{display: block;}
    .desktop-img{display: none;}

    .header-logo{display: flex;justify-content: center;}

    h1, h2, h4, p{text-align: center;}
    h4 {font-size: 25px;line-height: 20px;letter-spacing: 0;}
    h1 {font-size: 55px;line-height: 50px;}
    p {font-size: 20px;line-height: 24px;}
    ul li {font-size: 18px;line-height: 32px;letter-spacing: 0;}
    .banner-section ul li{padding-left: 35px;}
}

@media only screen and (max-width: 480px) {
    h2 {
        font-size: 34px;
        line-height: 38px;
    }
    .header-logo {
        margin-bottom: 20px;
    }
    h1 {font-size: 53px;line-height: 43px;margin-bottom: 10px;}
    p {font-size: 15px;line-height: 20px;}
    ul li {font-size: 14px;line-height: 25px;}
    h4 {font-size: 21px;line-height: 17px;}

    .banner-section ul li{padding-left: 25px;}
    .banner-section p {max-width: 300px;margin: 0 auto 20px;}
}


@media only screen and (max-width: 375px) {
    .content-box {
        height: 75vh;
    }
}