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

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

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

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

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


a{text-decoration:none;}
.mob-img{display: none;}
h1{font-size: 74px;line-height: 65px;font-family: 'Roundkey Med';font-weight: 500;color: #FFFFFF;text-transform: uppercase;}
ul li {
    color: #EBC79B;
    font-family: "Montserrat", sans-serif;
    font-size: 25px;
    line-height: 53px;
}
h4 {
    font-size: 52px;
    line-height: 42px;
    color: #fff;
    font-family: 'Roundkey';
    font-weight: bold;
    margin-bottom: 29px;
}
h4 span {
    color: #F1C346;
    text-transform: uppercase;
}

/*---------------------- banner-section css start ----------------------*/
.header-logo {margin-bottom: 40px;}
.header-logo img {max-width: 120px;width: 100%;}
.banner-section{padding:40px 0;background-image:url(../images/golden-angel.png);background-repeat: no-repeat;background-size: cover;min-height: 100vh;
    overflow: hidden;overflow-y: auto;background-position: center;}
.banner-section ul li{list-style: none;position: relative;padding-left: 45px;}
.banner-section ul li:before{content:"";background-image:url(../images/Ellipse-29.png);background-repeat:no-repeat;background-size:contain;width:15px;height:15px;position:absolute;left:0;top:50%;transform:translate(0,-50%);}
.banner-section ul{margin-bottom: 40px;}
.banner-section p{font-size: 48px;line-height: 50px;font-family: 'Roundkey';font-weight: 300;color: #fff;}
.banner-section p.text-with-border span {
    color: #D7A645;
}
.banner-section ul li::after {
    content: "";
    background-image: url(../images/Line-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1px;
    position: absolute;
    left: 7px;
    height: 100%;
    top: 3px;
}
.img-text-block {
    margin-bottom: 40px;
}
.img-text-block img {
    width: 100%;
    max-width: 1070px;
}
.img-text-block-mob{display: none;}
/*---------------------- banner-section css end ----------------------*/


@media only screen and (max-width: 1699px) {
    .img-text-block img {
        width: 100%;
        max-width: 930px;
    }
}



@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;}
}

@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;}
    .header-logo {margin-bottom: 20px;}
    .content-box {height: 80vh;}
    .banner-section ul li::after{left: 5px;}
    h4 {
        margin-bottom: 10px;
    }
    .img-text-block img {
        width: 100%;
        max-width: 600px;
    }
    .bottom-box img.desktop-img {
        max-width: 500px;
        width: 100%;
    }
}

@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;}

    .banner-section{background-image:url(../images/golden-angel-mob.png);}
    .img-text-block-mob{display: block;text-align: center;}
    .img-text-block{display: none;}

    .bottom-box img.mob-img {
        width: 100%;
    }
    h1 {
        font-size: 45px;
        line-height: 40px;
    }
    .img-text-block-mob p span{color: #D7A645;}
    .banner-section p {
        font-size: 32px;
        line-height: 36px;
    }
    ul li {
        font-size: 17px;
        line-height: 36px;
    }
    .banner-section{padding: 20px 0;}
}

@media only screen and (max-width: 480px) {
    ul li {
        font-size: 14px;
        line-height: 27px;
    }
    .banner-section ul {
        margin-bottom: 0;
        padding-left: 20px;
    }

    .header-logo img {
        max-width: 130px;
    }

    h1 {
        font-size: 31px;
        line-height: 27px;
    }
    h4 {
        font-size: 25px;
        line-height: 20px;
        margin-bottom: 10px;
    }
    .banner-section .img-text-block-mob p {
        font-size: 22px;
        line-height: 23px;
    }
    .img-text-block-mob img {
        margin-bottom: 8px;
        max-width: 170px;
    }
    .banner-section ul li{padding-left: 25px;}
    .header-logo {
        margin-bottom: 20px;
    }
}


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