@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primaryColor: #fff;
    --blackTextColor: #1a1d29;
    --lightBlackTextColor: #1a1d29f1;
    --yellowColor: #feef4c;
    --lightGreyColor: rgba(255, 255, 255, 0.3);
    --lg: 1400px;
}

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    box-sizing: border-box;
    /* border: 1px solid green; */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.flow-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* gap: 2rem; */
    /* padding: 4rem; */
    height: 516.88px;
    /* width: 60%; */
    width: 100%;
    position: relative;
    /* background: linear-gradient(to bottom, #ffffff, #f0f0f1); */
    /* background-color: red; */
}

.flow-svg {
    position: absolute;
    left: 0;
    width: auto;
    /* width: 1200px; */
}

.flow-svg.desktop {
    display: block;
}

.flow-svg.mobile {
    display: none;
}

.flow-svg.blue {
    transition: opacity 0.4s ease;
}

.flow-svg.one {
    z-index: 5;
    top: calc(50% - 110px);
    transform: translateY(-50%);
    left: -69px;
}

.flow-svg.one.blue,
.flow-svg.two.blue,
.flow-svg.three.blue,
.flow-svg.four.blue,
.flow-svg.five.blue {
    left: 0;
    /* opacity: 0.5; */
    /* width: 80% ; */
}

.flow-svg.two {
    z-index: 4;
    /* top: 160px; */
    top: calc(60% - 125px);
    transform: translateY(-50%);
    left: -42px;
}

.flow-svg.two.blue {
    top: calc(60% - 115px);
}

.flow-svg.three {
    z-index: 3;
    /* top: 256px; */
    top: calc(70% - 120px);
    transform: translateY(-50%);
    left: -96px;
}

.flow-svg.four {
    z-index: 4;
    /* top: 260px; */
    top: calc(80% - 117px);
    transform: translateY(-50%);
    left: -51px;
}

.flow-svg.four.blue {
    top: calc(80% - 126px);
}

.flow-svg.five {
    z-index: 5;
    /* top: 265px; */
    top: calc(90% - 128px);
    transform: translateY(-50%);
    left: -70px;
}

.flow-svg.five.blue {
    top: calc(90% - 130px);
}

.flow {
    opacity: .5;
}

.label {
    position: relative;
    z-index: 20;
    fill: #1a1d29da;
    font-size: 1.2rem;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 1px;
    z-index: 100;
    opacity: 1 !important;
}

.flow-label {
    position: absolute;
    font-family: "Montserrat", sans-serif;
    z-index: 10;
    font-size: 1.1rem;
    letter-spacing: 1px;
    fill: #1a1d29da;
    /* font-weight: lighter; */
    text-align: center;
}

.flow-label.one {
    top: 35px;
    left: 20px;
}

.flow-label.two {
    top: 126px;
    left: 20px;
}

.flow-label.three {
    top: 216px;
    left: 20px;
}

.flow-label.four {
    top: 326px;
    left: 20px;
}

.flow-label.five {
    top: 425px;
    left: 20px;
}

.strategy-logo-cnt {
    position: absolute;
    height: 250px;
    width: 450px;
    /* right: -60%; */
    right: 2%;
    top: 50%;
    /* transform: translateY(-55%); */
    /* top: calc(50% - 40px); */
    /* transform: translateY(-45%); */
    transform: translateY(-55%);
    z-index: 7;
    /* background-color: green; */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .5rem;
    background-color: white;
    box-shadow: -1px 0px 33.1px rgba(0, 0, 0, 0.14);
}

.strategy-logo-cnt .img-cnt {
    background-color: #1a1d29;
    padding: 1.2rem;
}

.strategy-logo-cnt .text {
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
    /* font-weight: lighter; */
    color: var(--blackTextColor);
}

@media (max-width:1300px) {
    .strategy-logo-cnt {
        width: 374px;
    }
}

@media (max-width:1024px) {

    /* .flow-svg {
        width: 931px;
        height: 305px;
    } */

    /* .strategy-logo-cnt {
        width: 201px;
        height: 186px;
    } */

    .flow-container {
        scale: 0.8;
    }

    .flow-svg.one {
        left: -160px;
    }

    .flow-svg.two {
        left: -131px;
    }

    .flow-svg.three {
        left: -186px;
    }

    .flow-svg.four {
        left: -141px;
    }

    .flow-svg.five {
        left: -161px;
    }

    .flow-svg.one.blue,
    .flow-svg.two.blue,
    .flow-svg.three.blue,
    .flow-svg.four.blue,
    .flow-svg.five.blue {
        left: -90px;
    }

    .flow-label.one,
    .flow-label.two,
    .flow-label.three,
    .flow-label.four,
    .flow-label.five {
        left: -65px;
    }


    .strategy-logo-cnt {
        right: -10%;
        width: 280px;
        height: 188px;
    }

    .strategy-logo-cnt .img-cnt {
        width: 136.5px;
        padding: 1.2rem;
    }

    .strategy-logo-cnt .img-cnt img {
        width: 96px;
    }

    .strategy-logo-cnt .text {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    :root {
        --lg: 90vw
    }

    .flow-svg.desktop {
        display: none;
    }

    .flow-svg.mobile {
        display: block;
    }

    .flow-svg.one,
    .flow-svg.one.blue {
        width: 342px;
        left: 43px;
        top: calc(50% - 32px);
        z-index: 6;
    }

    .flow-svg.one.blue {
        width: 248px;
        left: 107px;
    }

    .flow-svg.two,
    .flow-svg.two.blue {
        width: 236px;
        left: 155px;
        z-index: 8;
        top: calc(50% - 18px);
        z-index: 8;
    }

    .flow-svg.two.blue {
        width: 168px;
        left: 194px;
    }

    .flow-svg.three,
    .flow-svg.three.blue {
        left: 185px;
        width: 236px;
        top: calc(70% - 130px);
        z-index: 10;
    }

    .flow-svg.three.blue {
        width: 82px;
        left: 280px;
    }

    .flow-svg.four,
    .flow-svg.four.blue {
        left: 252px;
        width: 236px;
        top: calc(70% - 122px);
        z-index: 8;
    }

    .flow-svg.four.blue {
        width: 180px;
        left: 273px;
    }

    .flow-svg.five,
    .flow-svg.five.blue {
        left: 226px;
        width: 339px;
        top: calc(70% - 147px);
        z-index: 6;
    }

    .flow-svg.five.blue {
        width: 262px;
        left: 273px;
    }

    .flow-label {
        font-size: 11px;
        top: -25px !important;
        width: 66px;
        text-align: center;
    }

    .flow-label.one {
        left: 462px;
        font-size: 10px;
    }

    .flow-label.two {
        left: 378px;
    }

    .flow-label.three {
        left: 288px;
    }

    .flow-label.four {
        left: 198px;
    }

    .flow-label.five {
        left: 111px;
    }

    .strategy-logo-cnt {
        top: 88%;
        right: 53%;
        transform: translate(50%, -50%);
        z-index: 12;
        width: 220px;
        height: 151px;
    }
}

@media (max-width: 425px) {
    .flow-container {
        left: -106px;
    }

    .strategy-logo-cnt {
        right: 16%;
    }
}

@media (max-width: 375px) {
    .strategy .features {
        margin-right: 0;
    }

    .strategy .feature {
        font-size: 0.7rem;
    }

    .flow-container {
        left: -129px;
    }

    .strategy-logo-cnt {
        right: 3%;
    }
}

@media (max-width:320px) {
    .strategy .feature {
        font-size: 0.6rem;
    }

    .strategy .features {
        gap: 0.2rem;
    }

    .flow-container {
        scale: 0.7;
        left: -134px;
    }

    .strategy-logo-cnt {
        right: -13%;
    }
}