:root {
    --generas-platform-fontweight: 600;
    --generas-wealth-f0f1f4-color: #f0f1f4;
    --generas-wealth-fontsize: 24px;
    --generas-wealth-fontweight: 500;
    --get-started-section-get-link-backgroundcolor: #0b1727;
    --generas-least-size-fontsize: 14px;
    --get-started-section-get-text-color: #ccc;
    --geners-section-quant-heading-fontsize: 32px;
    --geners-wealth-2c3740-color: #2c3740;
    --return-section-return-strategy-fontsize: 13px;
    --generas-bold-wealth-fontweight: 500;
    --operating-section-distinct-heading-fontsize: 33px;
    --generas-middle-size-fontsize: 18px;
    --strategy-section-backgroundcolor: #f5f8fd;
    --strategy-section-percentage-name-color: #089981;
    --strategy-section-percentage-negative-color: #f23645;
    --strategy-section-year-name-fontsize: 12px;
    --strategy-section-year-name-color: inherit;
    --generas-left-section-img-name-color: #fff;

    --banner-bg: #42437D;
    --banner-color: #f9fafb;
    --banner-heading-fontsize: 32px;
    --banner-heading-fontweight: 700;
    --banner-description-fontsize: 17px;
    --banner-description-fontweight: 500;
    --banner-description-lineheight: 24px;
    --page-heading-color: inherit;
    --page-heading-fontsize: 24px;
    --page-heading-fontweight: 600;
    --strategies-returns-color: inherit;
    --strategies-returns-fontsize: 12px;
    --strategies-returns-fontweight: 400;
    --strategies-returns-border-color: #afafb5;
    --strategy-name-color: inherit;
    --strategy-name-fontsize: 18px;
    --strategy-name-fontweight: 600;
    --operating-models-color: inherit;
    --operating-models-fontsize: 16px;
    --operating-models-fontweight: 500;
    --operating-model-heading-color: inherit;
    --operating-model-heading-fontsize: 16px;
    --operating-model-heading-fontweight: 600;
    --operating-model-description-color: #191970;
    --operating-model-description-fontsize: 14px;
    --operating-model-description-fontweight: normal;
}

@media only screen and (max-width: 768px) {
    :root {
        --offshore-heading-fontsize: 22px;
        --offshore-heading-fontweight: 900;
        --offshore-description-fontsize: 14px;
        --offshore-description-fontweight: 600;
        --quant-heading-fontsize: 14px;
        --quant-heading-fontweight: 900;
        --access-heading-fontsize: 12px;
        --access-heading-fontweight: bold;

        --banner-heading-fontsize: 24px;
        --banner-description-fontsize: 14px;
        --banner-description-lineheight: 18px;
        --page-heading-fontsize: 18px;
        --strategies-returns-fontsize: 10px;
        --strategy-name-fontsize: 14px;
        --operating-models-fontsize: 14px;
        --operating-model-heading-fontsize: 14px;
        --operating-model-description-fontsize: 12px;
    }
}

.banner-section {
    min-height: 550px;
    position: relative;
    background-color: var(--banner-bg);
    background-image: url(../images/landingpage-bg.svg);
    background-repeat: no-repeat;
    -webkit-background-size: cover!important;
    background-size: cover!important;
    background-position: bottom right;
}

.banner-main-heading {
    color: var(--banner-color);
    font-size: var(--banner-heading-fontsize);
    font-weight: var(--banner-heading-fontweight);
    letter-spacing: 0;
}

.banner-main-description {
    color: var(--banner-color);
    font-size: var(--banner-description-fontsize);
    font-weight: var(--banner-description-fontweight);
    letter-spacing: 0;
    line-height: var(--banner-description-lineheight);
}

.get-started-button {
    color: var(--navbutton-color);
    font-weight: var(--navbutton-fontWeight);
    border: 2px solid var(--primary-color);
    background-color: var(--primary-color);
    border-radius: 32px;
    line-height: 48px;
    padding: 16px 20px;
    text-align: center;
}

a.get-started-button  {
    color: var(--navbutton-color);
}

.overseas_image {
    width: 450px;
    height: 250px;
}

@media only screen and (max-width: 576px) {
    .overseas_image {
        max-width: 375px;
    }
}

.strategies-heading {
    color: var(--page-heading-color);
    font-size: var(--page-heading-fontsize);
    font-weight: var(--page-heading-fontweight);
}

.strategy-returns {
    border-radius: 10px;
    border: 1px solid var(--strategies-returns-border-color);
    color: var(--strategies-returns-color);
    font-size: var(--strategies-returns-fontsize);
    font-weight: var(--strategies-returns-fontweight);
}

.strategyname {
    color: var(--strategy-name-color);
    font-size: var(--strategy-name-fontsize);
    font-weight: var(--strategy-name-fontweight);
    opacity: 0.8;
}

.wealth-h-size {
    font-size: var(--generas-wealth-fontsize);
}

.wealth-f0f1f4 {
    color: var(--generas-wealth-f0f1f4-color);
}

.wealth-m-weight {
    font-weight: var(--generas-wealth-fontweight);
}

.wealth-l-size {
    font-size: var(--generas-least-size-fontsize);
}

.wealth-fff {
    color: var(--generas-left-section-img-name-color);
}

.get-started-section {
    position: absolute;
    bottom: 104px;
    left: 98px;
}

.get-link {
    background-color: var(--get-started-section-get-link-backgroundcolor);
    border-radius: 40px;
    border: 3px solid #1a3458;
    max-width: 205px;
}

.graph-image {
    position: relative;
    bottom: 68px;
    max-height: 126px;
}

.quant-heading {
    font-size: var(--geners-section-quant-heading-fontsize);
}

.view-button {
    border-radius: 25px;
    border: 0;
}

.horizontal-darw {
    border-top: 2px solid #2c3740;
    opacity: 0.3;
}

.distinct-heading {
    font-size: var(--operating-section-distinct-heading-fontsize);
}

.access-section,
.introducer-section {
    border-radius: 11px;
    box-shadow: 0px 0px 20px 0px #d9e2ea;
}

.introducer-heading {
    font-size: var(--introducer-content-section-introducer-heading-fontsize);
}

.genres-left {
    position: relative;
}

.genre-img {
    width: 278px;
    height: 236px;
    border-radius: 16px;
}

.genretype {
    position: absolute;
    bottom: 30.5px;
    left: 32px;
}

.genres-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.strategy-item {
    background-color: var(--strategy-section-backgroundcolor);
    border-radius: 16px;
    justify-content: left;
}

.retunpercent {
    font-size: var(--generas-least-size-fontsize);
    font-weight: var(--generas-bold-wealth-fontweight);
    color: var(--strategy-section-percentage-name-color);
}

.retunpercent.negative-values {
    color: var(--strategy-section-percentage-negative-color);
}

.retuns {
    font-size: var(--strategy-section-year-name-fontsize);
    font-weight: var(--generas-platform-fontweight);
    color: var(--strategy-section-year-name-color);
    opacity: 0.5;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto;
}

.grid-item {
    text-align: left;
    height: auto;
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .graph-img {
        position: relative;
        top: 98px;
        height: 82px;
        width: 73px;
    }

    .get-start-img {
        max-width: 15px;
        max-height: 15px;
    }

    .get-started-section {
        position: relative;
        left: 35px;
        bottom: 43px;
    }

    .offshore-heading {
        font-size: var(--offshore-heading-fontsize);
        font-weight: var(--offshore-heading-fontweight);
    }
    
    .offshore-description {
        font-size: var(--offshore-description-fontsize);
        font-weight: var(--offshore-description-fontweight);
    }
    
    .quant-heading {
        font-size: var(--quant-heading-fontsize);
        font-weight: var(--quant-heading-fontweight);
    }
    
    .distinct-heading {
        font-size: var(--quant-heading-fontsize);
        font-weight: var(--quant-heading-fontweight);
    }
    
    .distinct-content {
        font-size: var(--quant-heading-fontsize);
        font-weight: var(--offshore-description-fontweight);
    }
    
    .img-logo {
        height: 40px;
        width: 40px;
    }
    
    .access-heading,
    .introducer-heading {
        font-size: var(--access-heading-fontsize);
        font-weight: var(--access-heading-fontweight);
    }
    
    .access-content,
    .introducer-content {
        font-size: var(--access-heading-fontsize);
        font-weight: var(--generas-wealth-fontweight);
    }
}

@media only screen and (max-width: 1199px) {
    .img-mobile{
        width: 100%;
        height: 100px;
        border-radius: 0;
    }

    .genretype {
        font-size: var(--access-heading-fontsize);
        font-weight: var(--access-heading-fontweight);
        position: absolute;
        bottom: 8.5px;
        left: 223px;
    }
}

.operating-models__container .heading {
    color: var(--page-heading-color);
    font-size: var(--page-heading-fontsize);
    font-weight: var(--page-heading-fontweight);
    text-align: center;
}

.operating-models__container .description {
    color: var(--operating-models-color);
    font-size: var(--operating-models-fontsize);
    font-weight: var(--operating-models-fontweight);
    opacity: 0.6;
}

.operating-model {
    display: flex;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 30px 8px rgb(171 212 246 / 20%);
    background-color: #fff;
}

.operating-model .logo {
    padding: 60px 40px;
}

.operating-model .logo img {
    height: 80px;
    width: auto;
}

@media only screen and (max-width: 768px) {
    .operating-model .logo {
        padding: 20px 10px;
    }

    .operating-model .logo img {
        height: 60px;
        width: auto;
    }
}

.operating-model .content .heading {
    color: var(--operating-model-heading-color);
    font-size: var(--operating-model-heading-fontsize);
    font-weight: var(--operating-model-heading-fontweight);
    text-align: left;
    margin-bottom: 8px;
}

.operating-model .content ul.description {
    padding-left: 1rem;
}

.operating-model .content ul.description li {
    color: var(--operating-model-description-color);
    font-size: var(--operating-model-description-fontsize);
    font-weight: var(--operating-model-description-fontweight);
    opacity: 1;
}