﻿
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


html, body {
    width:100%; height:100%; overflow: auto; padding:0; display: block;
    margin: 0;
    background: #19084b;
    color: #fff;
     font-family: "Montserrat", sans-serif;
}

.boxWrp {
    display: flex; justify-content: space-between;
    height:100%;
}


.boxWrp .Right {
    width:100%;
    display: flex; justify-content: flex-end;
}
.boxWrp .Right .Right-sideBox {
    max-width:1000px;
    z-index: 2; position: relative; padding:100px; text-align: left;
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.boxWrp .Right .Right-sideBox .d-flex {
    display: flex; align-items: flex-start; flex-direction: column;
}

.boxWrp .Right a.bTn {
    color: #19084b; padding:12px 25px; margin:50px 0 0; font-weight: bold; text-decoration: none;
    background: #56C298;
background: linear-gradient(90deg, rgba(86, 194, 152, 1) 0%, rgba(120, 198, 223, 1) 100%);
}

.boxWrp .Left {
    width:60%;
}
.boxWrp .Left img {
    width:100%; opacity: 0.65;
}
.boxWrp .Left,
.boxWrp .Left img {
    z-index: 1; position: absolute; left:0; top:0; bottom:0; height:100%;
    object-fit: cover; object-position: left center;
}






* {
    box-sizing: border-box;
}

.logo-area {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.logo-square {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5em;
    font-weight: 700;
    border: 4px solid #ba5773;
    border-radius: 0;
    color: #ba5773;
    background: #391753;
}

.logo-square:nth-child(2) {
    border-color: #56c298;
    color: #56c298;
    background: #252b57;
}

.logo-square:nth-child(3) {
    border-color: #78c6df;
    color: #78c6df;
    background: #26265f;
}

.logo-square:nth-child(4) {
    border-color: #d1d269;
    color: #d1d269;
    background: #33284e;
}

.strategies {
    font-size: 2.5em; text-align: center;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 600;
}

.main-heading {
    color: #2cedff;
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top: 10px;
}

.ether-logo {
    color: #2cedff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 7px;
}

.powered-details {
    color: #cfe2f3;
    font-size: 0.84em;
    font-weight: 400;
}

.hedge {
    color: #c0504d;
}
.family {
    color: #627db7;
}
.asset {
    color: #c93a2a;
}

.desc {
    margin-top: 18px;
    color: #fff;
    font-size: 1.08em;
    letter-spacing: 0.01em;
    font-weight: 500;
    line-height: 1.6;
}




@media (max-width: 1750px) {
    
    .boxWrp .Right .Right-sideBox {
        max-width:800px; padding:70px;
    }
    
    .boxWrp .Left,
    .boxWrp .Left img {
         object-position: left center;
    }

    
}


@media (max-width: 1250px) {
    
    
    
    .boxWrp .Right .Right-sideBox { padding:25px; max-width:600px; }
    
    .logo-square {
        width: 60px;
        height: 60px;
        font-size: 2.85em;
        border:3px solid #ba5773;
    }
    .main-heading {
        font-size: 22px;
    }
    .strategies {
        font-size: 32px;
    }
    .desc { font-size:16px; }
    .desc br { display: none; }
    
}


@media (max-width: 991px) {
    
    
    .boxWrp .Left { width:100%; }
    .boxWrp .Left img { width:100%; opacity: 0.25; }
    
    
    .boxWrp .Right .Right-sideBox { max-width:100%; }
    .boxWrp .Right .Right-sideBox,
    .boxWrp .Right .Right-sideBox .d-flex { align-items: center;  text-align: center; }
    
    
}


@media (max-width: 767px) {
    .logo-area {
        gap: 7px;
    }

    .boxWrp {
        padding: 18px 2vw 0 2vw;
    }
    
    .boxWrp .Left {
        padding: 15px; 
    }
    .boxWrp .Left,
    .boxWrp .Left .d-flex {
        align-items: center; text-align: center;
    }
    
    
    
    .boxWrp .Right img { object-position: right center; opacity: 0.2; }

    
}
