/*** Color codes  ***/
:root {
    --color-black: #000000;
    --color-base-black: #131741;
    --color-base-black-1: #1D2359;
    --color-base-black-2: #2F3671;
    --color-grey-1: #F6F7FF;
    --color-grey-2-2: #E9EBF9;
    --color-grey-2: #D9DBE7;
    --color-grey-3: #D0D5DD;
    --color-grey-4: #96A1B7;
    --color-grey-5: #667085;
    --color-grey-6: #475467;
    --color-grey-7: #4A4D68;
    --primary-color-0: #6C7FE1;
    --primary-color: #3443C9;
    --primary-color-2: #2735B3;
    --color-green-2: #57DBAC;
    --color-green-1: #20B982;
    --color-green-3: #169F6E;
    --color-red-1: #DF5834;
    --color-red-2: #CD4D2B;
    --color-white: #fff;
    --color-grey-900: #101828;


}
body {
    font-family: 'BarlowRegular';
    font-weight: 400;
    background: var(--color-grey-1);
    color: var(--color-base-black);
}

main {
    float: left;
    padding: 0px;
    width: 100%;
}


section {
    float: left;
    padding: 24px 0px 4px 0px;
    position: relative;
    width: 100%;
}


img {
    display: inline-block;
    max-width: 100%;
}

p {
    margin-bottom: 30px;
}

/** Headings  **/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
label {
    font-family: 'BarlowBold';
    font-weight: 700;
}

h4,
.h4,
h5,
.h5 {
    margin-bottom: 12px;
}




/*** Media Queries ***/

@media(min-width:375px) {
    body{
        font-size: calc(18px + 6 * ((100vw - 320px) / 680));
    }
    
    /** Headings  **/
    h1,
    .h1 {
        font-size: calc(34px + 6 * ((100vw - 320px) / 680));
        line-height: 1.24;
        letter-spacing: -0.02em;
        margin-bottom: 20px;
    }

    h2,
    .h2 {
        font-size: calc(30px + 6 * ((100vw - 320px) / 680));
        line-height: 1.17;
        letter-spacing: -0.02em;
        margin-bottom: 30px;
    }

    h3,
    .h3 {
        font-size: calc(26px + 6 * ((100vw - 320px) / 680));
        line-height: 1.2;
        margin-bottom: 20px;
    }

    h4,
    .h4 {
        font-size: calc(22px + 6 * ((100vw - 320px) / 680));
        line-height: 1.28;
    }

    h5,
    .h5 {
        font-size: calc(20px + 6 * ((100vw - 320px) / 680));
        line-height: 1.25;
    }

    h6,
    .h6 {
        font-size: calc(16px + 6 * ((100vw - 320px) / 680));
        line-height: 1.4;
    }


    .body-20 ,.investor-slider-wrap .investor-item{
        font-size: calc(18px + 6 * ((100vw - 320px) / 680));
        line-height: 1.56;
    }

    .body-18 ,.btn.btn-lg,.individual-investor form button {
        font-size: calc(16px + 6 * ((100vw - 320px) / 680));
        line-height: 1.5;
    }


}

@media (min-width:1440px) {
    /** Headings  **/
    body{
        font-size: 18px;
        line-height: 1.56;
    }
    h1,
    .h1 {
        font-size: 54px;
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin-bottom: 36px;
    }

    h2,
    .h2 {
        font-size: 44px;
        line-height: 1.19;
        letter-spacing: -0.02em;
        margin-bottom: 32px;
    }

    h3,
    .h3 {
        font-size: 38px;
        line-height: 1.22;
        margin-bottom: 28px;
    }

    h4,
    .h4 {
        font-size: 30px;
        line-height: 1.27;
    }

    h5,
    .h5 {
        font-size: 24px;
        line-height: 1.25;
    }

    h6,
    .h6 {
        font-size: 18px;
        line-height: 1.34;
    }


    .body-20 ,.investor-slider-wrap .investor-item{
        font-size: 20px;
        line-height: 1.6;
    }

    .body-18,.btn.btn-lg,.individual-investor form button {
        font-size: 18px;
        line-height: 1.12;

    }
    .overflowHidden {
        padding-right: 15px;
    }

}

label {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-base-black);
    margin-bottom: 8px;
}

/***  All buttons ***/

.btn-link:hover,
a:hover,
.account-dropdown .dropdown-menu ul li a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.link-revers {
    color: var(--primary-color);
}

.link-revers:focus,
.link-revers:hover {
    color: var(--color-base-black);
}

.btn.focus,
.btn:focus {
    box-shadow: none;
}