.main-ind {
    background-image: url('/assets/images/indices/main.png');
    background-repeat: no-repeat;
    background-size: 95% 100%;
    background-position: 100% 0;
    position:relative;
    overflow:hidden;
}

/* Pseudo-element for the blur effect */
.main-ind::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px; 
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.main-ind h1 {
    display:none;
}

.main-ind .container img {
    width:22%;
    margin:0 auto;
}

.main-ind .sub-ind {
    padding:450px 120px 50px 0px;
    text-align:center;
}

.main-ind .sub-ind h2 {
    font-size: 26px;
	font-weight: 400;
	font-family: var(--font-body);
}

.btn-ind {
    background: linear-gradient(90deg,#ffffff,#0030ad,#000000);
    color: var(--white);
}

.sub-ind .btn-sleek {
    padding:5px 50px;
}

.trade-global {
    background: linear-gradient(107.742deg, rgb(166, 166, 166) 3.25203%, rgb(217, 217, 217) 51.0163%, rgb(255, 255, 255) 95.7317%);
    line-height: 1em;
    font-size: 32px;
    font-weight: 500;
    font-family: var(--font-body);
}

.trade-global-boxes {
    display:flex;
    gap: 20px; 
    align-items: stretch; 
    flex-wrap:wrap;
    row-gap:20px;
}

.trade-global-boxes > div {
    min-height:410px;
}

.flex-36 {
    flex: 0 0 34%;
    width: 34%;
    padding: 30px 20px 20px;
}

.flex-64 {
    flex: 0 0 64%;
    width: 64%;
    padding: 30px 20px 20px;
    background-image: url(/assets/images/indices/broad-market-exposure-s.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.flex-28 {
    flex: 1 0 28%;
    width: 28%;
    padding: 30px 20px 20px;
}

.trade-global-boxes h4 {
    font-weight:600;
    color:var(--white);
    line-height:1em;
}

.trade-global-boxes p {
    font-weight: 400;
    color: var(--white);
}

.flex-64 p {
    max-width:290px;
}

.ind-snp {
    background: linear-gradient(180deg,#ffffff,#0030ad,#000000);
    padding:1px;
    height:120px;
    margin:60px auto;
    max-width:500px;
}

.ind-snp img {
    height:30px;
}

.ind-snp p {
    font-size:12px;
    color:rgba(255,255,255,0.7);
}

.ind-snp p span {
    color:red;
}

.blue-bg {
    background: linear-gradient(180deg,#ffffff,#0030ad,#000000);
}

.orange-bg {
    background: linear-gradient(180deg,#ffffff,#ff5c00,#000000);
}

.real-time img {
    margin-top:50px;
    width:100%;
    position:absolute;
    left:0px;
    bottom:20px;
}

.orange-bg p {
    position: absolute;
    padding: 0px 20px;
    right: 0px;
    bottom: 20px;
    text-align:right;
    margin-bottom:0px;
}

.prd-box-sec h2 {
    /*background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(51, 114, 227) 50%, rgb(0, 74, 173) 100%);*/
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(51, 114, 227) 33%, rgb(0, 74, 173) 66%, rgb(255,255,255) 100%);
}

@media (min-width: 1600px) {
    .main-ind .container {
        padding-top:100px;
    }

    .main-ind .sub-ind {
        padding-top: 550px;
    }

    .trade-global-boxes > div {
        min-height: 435px;
    }
}

@media (max-width: 1199.98px) {
    .trade-global-boxes {
        flex-direction:column;
    }

    .trade-global-boxes > div {
        width:100%;
        flex:0 0 100%;
    }

    .trade-global-boxes .full-w h4 br, .trade-global-boxes .full-w p br {
        display:none;
    }

    .trade-global-boxes .ind-snp p br {
        display:block;
    }

    .real-time img {
        width: 100%;
        position: unset;
    }
}

@media (max-width:991.98px) {
    .trade-global br {
        display:none;
    }

    .main-ind .sub-ind {
        padding-top: 300px;
    }
}

@media (max-width:575.98px) {
    .main-ind {
        background: unset;
    }

    /* Pseudo-element for the blur effect */
    .main-ind::after {
        content: none;
    }

    .main-ind .container img {
        width:40%;
        margin:0 auto;
    }

    .main-ind .sub-ind {
        padding:50px 0px 0px 0px;
        text-align:center;
    }

    .main-ind .sub-ind h2 {
        font-size:22px;
    }

    .acc-comp div h5 {
        font-size:20px;
    }

    .trade-global {
        font-size:28px;
    }

    .trade-global-boxes h4 {
        font-size:24px;
    }

    .real-time img {
        position: absolute;
    }
}