@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/stockpandint-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background-position: center;
    position: relative;
}
.banner-box{
    position: relative;
    z-index: 99;
}
.banner-section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(71, 55, 55, 0.658);
    z-index: 0;
}
.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: 1399px){
    .header-logo {
        margin-bottom: 10px;
    }
    h1{
        font-size: 55px;
    }
    .img-text-block img {
        width: 100%;
        max-width: 550px;
    }
    img.desktop-img {
        max-width: 40%;
    }
    h4 {
        font-size: 42px;
        line-height: 32px;
    }
}
@media only screen and (max-width: 1299px){
    h1 {
    font-size: 50px;
}
.header-logo img {
    max-width: 90px;
    width: 100%;
}
.header-logo {
    margin-bottom: 20px;
}
.img-text-block img {
    width: 100%;
    max-width: 450px;
}
 ul li {
    font-size: 20px;

}
.bottom-box {
    margin-top: 25px;
}
.bottom-box img {
    max-width: 35%;
}
.banner-section {
    padding: 15px 0 20px;
}
.banner-section ul {
    margin-bottom: 10px;
}
ul li {
    font-size: 20px;
    line-height: 38px;
}
h4{
    font-size: 42px;
    line-height: 32px;

}
.img-text-block {
    margin-bottom: 15px;
}



}

@media only screen and (max-width: 1199px) {
    h2 {font-size: 69px;line-height: 55px;}
    .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;}
   
    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;
        margin-top: 20px;
    }

    h1, h2, h4, p{text-align: center;}

    .banner-section{background-image:url(../images/stockpandint-bg.jpg);}
    .img-text-block-mob{display: block;text-align: center;}
    .img-text-block{display: none;}

    .bottom-box img.mob-img {
        width: 80%;
        max-width: 100%;
        margin: 0 auto;
    }
    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:  0;}
    .bottom-box {
        margin-top: auto;
    }
}

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

    h1 {
        font-size: 31px;
        line-height: 27px;
    }
    h4 {
        font-size: 32px;
        line-height: 37px;
        margin-bottom: 30px;
    }
    .banner-section .img-text-block-mob p {
        font-size: 28px;
        line-height: 23px;
    }
    .img-text-block-mob img {
        margin-bottom: 8px;
        max-width: 170px;
    }
    
    .header-logo {
        margin-bottom: 20px;
    }
}


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

.zoom {
    animation: zoom 1.5s infinite;;
  }

.zoom:hover{
    animation-play-state: paused;
}
  
  @keyframes zoom {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% { 
        transform: translateY(-10px);
    }
  }