﻿.navbar {
    z-index: 2;
}
.navbar, body.dark .nav-center {
    background-color: rgba(0,0,0,0.6);
}

h1 {
    display:none;
}

.imgTitle {
    width:80%;
}

.mainBG {
    padding-right:4%;
}

.mainBG img {
    width:90%;
    position:relative;
    top:-10%;
    z-index:1;
}

.btn-white-light {
    background-color: var(--white);
    color: var(--black);
    font-size: 20px;
    font-weight: 500;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #a9a9a9, 0 0 20px #a9a9a9;
}

.h2plat {
    background: linear-gradient(70.3148deg, rgb(255, 49, 49) 0%, rgb(255, 255, 255) 45.2575%, rgb(12, 255, 0) 71.0027%, rgb(255, 255, 255) 100%);
    font-size: 32px;
    font-weight: 600;
}

.plat {
    min-width: 220px;
    padding: 10px 20px;
    border-radius: 50rem;
    border: solid 1px var(--white);
    font-family: var(--font-h);
    font-size: 15px;
    color: var(--white);
}

.plat a {
    display:flex;
    justify-content:center;
    gap:10px;
}

.plat .img-g {
    display:none;
}

.plat:hover {
    background-color: var(--green);
    color: var(--black);
    border: solid 1px var(--green);
}

.plat:hover img:not(.img-g) {
    display:none;
}

.plat:hover .img-g {
    display:block;
}

.windows img {
    width:25px;
}

.apple img {
    height: 23px;
}

.android img {
    width:22px;
}

.mt-feat h3 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: solid 2px var(--white);
    text-align: center;
}

.mt-feat p {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 200;
    line-height: 1.4em;
    color: var(--white);
    text-align: justify;
    margin-bottom: 0;
}

.mt-opt {
    border:solid 1px var(--white);
    border-radius:30px;
    height:100%;
    width:100%;
    padding:30px 0px;
    overflow:hidden;
}

.mt-opt div {
    padding:0px 30px;
}

.mt-opt h3 {
    font-size: 48px;
    font-weight: 500;
    color: var(--white);
}

.mt-opt p, .mt-opt ul li {
    font-size: 16px;
    font-weight: 200;
    color: var(--white);
    line-height:1.5em;
}

.mt-opt ul {
    margin-left:0px;
    padding-left:15px;
}

.mt-opt ul li:not(:first-child) {
    margin-top: 30px;
}

.mt-opt ul li strong {
    font-weight:700;
}

.meta-trade-boxes span {
    /*background: linear-gradient(90deg,rgba(155,155,155,0.5) 25%,rgba(155,155,155,0.75) 50%,rgba(155,155,155,1) 75%,#ffffff 100%);*/
    background: linear-gradient(90deg, rgba(221, 221, 221, 0.5) 25%, rgba(238, 238, 238, 0.75) 50%, #ffffff 100%);
    background-size: 200% !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent;
    display: inline-block;
    animation: text-colors 3s infinite linear;
}

@media (min-width: 992px) {

    .meta-trade {
        padding:300px 0px;
        position:relative;
        min-height:100vh
    }

    .meta-trade .trade-img {
        width:35%;
    }

    .meta-trade span {
        font-family:var(--font-h);
        font-size:24px;
        font-weight:400;
        color:var(--white);
        line-height:1em;
    }

    .trade-spread {
        position:absolute;
        top:0px;
        left:0px;
        width:27%;
        height:300px;
        min-height:40vh;
        background:url('/assets/images/metatrader/spreads.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-right:solid 3px #292b2c;
        border-bottom:solid 3px #292b2c;
        border-bottom-right-radius:50px;
        box-shadow: inset -40px -40px 50px 0 rgba(0, 0, 0, 0.5);
    }

    .trade-spread span {
        position:absolute;
        right:30px;
        bottom:40px;
    }

    .one-click {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 18%;
        height: 350px;
        min-height: 45vh;
        background: url('/assets/images/metatrader/one-click-trading-1.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-right: solid 3px #292b2c;
        border-top: solid 3px #292b2c;
        border-top-right-radius: 50px;
    }

    .one-click span {
        position: absolute;
        right: 30px;
        top: 40px;
    }

    .custom-charts {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 22%;
        height: 300px;
        min-height: 40vh;
        background: url('/assets/images/metatrader/customizable-charts.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-left: solid 3px #292b2c;
        border-bottom: solid 3px #292b2c;
        border-bottom-left-radius: 50px;
    }

    .custom-charts span {
        position: absolute;
        left: 30px;
        bottom: 40px;
    }

    .low-latency {
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 22%;
        height: 350px;
        min-height: 45vh;
        background: url('/assets/images/metatrader/low-latency-trading.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        /*border-left: solid 3px #292b2c;
        border-top: solid 3px #292b2c;*/
        border-top-left-radius: 50px;
    }

    .low-latency span {
        position: absolute;
        left: 30px;
        top: 40px;
    }

    .multi-plat {
        position: absolute;
        bottom: 0px;
        left: 30%;
        width: 40%;
        height: 210px;
        min-height: 27vh;
        background: url('/assets/images/metatrader/multi-platform.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-left: solid 3px #292b2c;
        border-top: solid 3px #292b2c;
        border-right: solid 3px #292b2c;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        padding: 30px;
    }
}

@media (min-width:1600px) {
    .mt-feat h3 {
        font-size: 20px;
    }
}

@media (max-width: 991.98px) {
    .imgTitle {
        margin-top:60px;
        width: 60%;
    }

    .meta-trade {
        padding:80px 0px;
        max-width:90%;
        margin:0 auto;
        flex-direction:column;
    }

    .meta-trade .trade-img {
        width:50%;
    }

    .meta-trade span {
        font-family:var(--font-h);
        font-size:20px;
        font-weight:400;
        color:var(--white);
        line-height:1em;
    }

    .meta-trade-boxes {
        display:flex;
        flex-wrap:wrap;
        margin-top:50px;
        gap:2rem;
        row-gap:2rem;
        justify-content:center;
        align-items:center;
    }

    .meta-trade-boxes > div {
        padding:30px;
        text-align:center;
        border:solid 3px #292b2c;
        border-radius:30px;
        height:100%;
        min-height:100px;
        min-width:300px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        row-gap:2rem;
    }

    .meta-trade-boxes div span br {
        display:none;
    }

    .trade-spread {
        background: url('/assets/images/metatrader/spreads.png');
        box-shadow: inset -40px -40px 50px 0 rgba(0, 0, 0, 0.5);
    }

    .one-click {
        background: url('/assets/images/metatrader/one-click-trading-1.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .custom-charts {
        background: url('/assets/images/metatrader/customizable-charts.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .low-latency {
        background: url('/assets/images/metatrader/low-latency-trading.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .multi-plat {
        background: url('/assets/images/metatrader/multi-platform.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        align-items:center!important;
    }
}

@media (max-width:575.98px) {
    .imgTitle {
        width: 80%;
    }

    .btn-box {
        width: 150px;
        padding: 15px 0px;
    }

    .btn-white-light {
        font-size: 16px;
    }

    .meta-trade .trade-img {
        width: 70%;
    }

    .meta-trade-boxes > div {
        width:100%;
    }
}