body {
    margin: 0px;
    padding: 0px;

}

.container {
    display: flex;
    width: 100%;
    padding: 30px;
    flex-direction: column;
    gap: 100px;
    box-sizing: border-box;
    overflow-x: hidden;
    background-color: #F8F9FB;

}

/* container padding needs to be updated to 100px when screen changes to laptop */

.one {
    display: flex;
    gap: 50px;
    flex-direction: column;
}

.troodie-header {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

.troodie-header>span {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.troodie-header>img {
    width: 144px;
    height: 72px;
}

/* img needs to be updated for increased width & height */

.troodie-vision {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.troodie-vision .intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.troodie-vision .intro .descriptions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.troodie-vision .intro .descriptions h1 {
    color: #0F0F0F;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 136.364% */
    letter-spacing: 1px;
}

.troodie-vision .intro .descriptions h2 {
    color: #E1A314;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
}

/* increase the text to 36px */
.troodie-vision .intro .descriptions h3 {
    color: #0F0F0F;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
}

.troodie-vision .intro .descriptions h4 {
    color: #E1A314;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    /* 162.5% */
}

.troodie-vision .intro .image {
    padding: 10px;
    height: 240px;
    background: #FFF;
}

.troodie-vision .intro .image>img {
    /* padding: 10px; */
    height: 100%;
    width: 100%;
    /* background: #FFF; */
    object-fit: contain;
}

.troodie-vision .app-intro {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    /* justify-content: space-between; */
    gap: 24px;
}

.troodie-vision .app-intro .one>img {
    /* padding: 10px; */
    height: 100%;
    width: 100%;
    /* background: #FFF; */
    object-fit: contain;
}

.troodie-vision .app-intro .two>img {
    /* padding: 10px; */
    height: 100%;
    width: 100%;
    /* background: #FFF; */
    object-fit: contain;
}

.troodie-challenge {
    display: flex;
    padding: 10px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    background: #FEF2F2;
}

/* padding needs to be updated to 40px & 60px, gap needs to be updated to 20px */

.troodie-challenge h1 {
    color: #9F0712;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
}

.troodie-challenge span {
    color: #0F0F0F;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
}


/* section two */
.role {
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    background: #000;
    box-sizing: border-box;
}

/* gap needs to be updated to 60px */

.role .role-description {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.role h1 {
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 136.364% */
    letter-spacing: 1px;
}

.role h2 {
    color: #E1A314;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
}

.role span {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 185.714% */
}

.role .role-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.role .role-cards>.card {

    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    text-align: center;
    /* flex: 1 0 0; */
    align-self: stretch;
    background: rgba(249, 249, 249, 0.08);
}

.role .role-cards>.card span {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 187.5% */
    letter-spacing: 1px;
}

/* section two ends */


/* section three */
.content {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    background-color: #F8F9FB;
    gap: 30px;
    box-sizing: border-box;

}

.content h2 {
    color: #E1A314;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
}

/* update the font-size to 36px */

.cards {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
}

.cards>div:nth-child(even) {
    display: flex;
    flex-direction: column-reverse;
}


/* section three ends */

/* section four */
.app-screenshots {

    background-image: url("../Assets/Images/troodie/mockup_three.png");
    background-repeat: no-repeat;

}

/* update image height  width as per screen size */

/* section five */
.grid-box {
    width: 100%;
}

.grid-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-success {
    background-color: #F0FDF4;
    padding: 20px;
    display: flex;
    padding: 30px;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.app-success img {
    width: 60px;
    height: 60px;
    background-color: #DBFCE7;
}

.app-success span {
    color: #016630;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 187.5% */
    letter-spacing: 1px;
}

.founder-statements {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.founder-statements>h2 {
    color: #E1A314;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
}


@media only screen and (min-width: 768px) {

    .troodie-vision .app-intro {
        justify-content: space-between;
    }

    .role .role-cards {
        display: flex;
        flex-direction: row;
        gap: 20px;

    }

    .role .role-cards>.card {
        flex: 1 0 0;
    }

    .cards {
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

    .cards>div:nth-child(even) {
        display: flex;
        flex-direction: row-reverse;
    }

}

@media only screen and (min-width: 1024px) {

    .container {
        padding: 100px;
    }

    .troodie-vision {
        flex-direction: row;
        gap: 100px;
    }

    .troodie-header>img {
        width: 320px;
    }

    .troodie-vision .intro .image {
        padding: 50px;
        height: 300px;
    }

    .role {
        padding: 100px;
    }

    .role .role-cards>.card {
        padding: 50px;
        gap: 10px;
    }

    .role .role-cards {
        width: 100%;
    }

    .content {
        padding: 100px;
    }

    .app-screenshots {
        width: 100%;
    }

    .founder-statements>h2 {
        font-size: 36px;
    }

    .troodie-vision .app-intro {
        position: relative;
        flex-direction: column;
    }

}

@media only screen and (min-width: 1336px) {
    .troodie-vision .app-intro {
        flex-direction: row;
    }

    .troodie-vision .app-intro .two {
        position: relative;
        top: -200px;
    }
}

.web-header-component-wrapper {
    background-color: black;
    color: white;
}


.top-text {
    color: #fff;
    font-size: 48px;
    font-weight: 600;
}

.bottom-text {
    color: #1f6ddf;
    font-size: 32px;
    font-weight: 500;
}

.top-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.top-bg-wrapper {
    width: 100%;
    height: 377px;
    background-image: url("../Assets/Images/troodie/new_background.png");
    aspect-ratio: 5479 / 1815;
    background-size: cover;
    background-position: center;
}

.video-content {
    animation: none;
}

.video-text-wrapper {
    height: 576px;
}

.front-wrapper {
    height: 576px;
}

.middle-video-wrapper {
    height: unset;
}

.heading-1 {
    color: #FAB515;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.troodie-intro {
    padding: 100px 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.info {
    display: flex;
    padding: 0 100px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    flex: 1 0 0;
}

.info .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.heading-3 {
    color: #E1A314;
    font-family: "Roboto Slab";
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
}

.heading-4 {
    color: #0F0F0F;
    text-align: justify;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
}

.heading-5 {
    color: #E1A314;
    text-align: justify;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    /* 162.5% */
}

.troodie-intro .image img {
    /* background-image: url(""); */
    aspect-ratio: 6077 / 6622;
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
}

.challenge {
    padding: 0px 100px 100px 100px;
    /* width: 100%; */
}

.challenge-info {
    display: flex;
    padding: 40px 60px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    background: #FEF2F2;

}

.challenge-info h2 {
    color: #9F0712;
    font-family: "Roboto Slab";
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
}

.challenge-info p {
    color: #0F0F0F;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
}

.grid-box-two {
    display: flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    align-self: stretch;
    background: #E1A314;
}

.grid-box-two h2 {
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 136.364% */
    letter-spacing: 1px;
}

.grid-box-two span {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 187.5% */
    letter-spacing: 1px;
}

.founder-statements .statement {
    display: flex;
    padding: 30px;
    align-items: flex-start;
    gap: 30px;
    align-self: stretch;
    background: #FFF;
}

.founder {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.st-pic {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    flex: 1 0 0;

}

.founder-info {
    display: flex;
    flex-direction: column;
}

.mockup_two {
    background-image: url("../Assets/Images/troodie/mockup_two.png");
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
    background-size: contain;
}

.mockup_four {
    background-image: url("../Assets/Images/troodie/mockup_three.png");
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
    background-size: contain;
}

@media only screen and (max-width: 480px) {
    .mockup_two {
        height: 240px;
    }

    .mockup_four {
        height: 240px;
    }

    .troodie-intro {
        flex-direction: column;
    }

    .troodie-intro .info {
        padding: 0px 20px;
    }

    .challenge {
        padding: 20px;
    }

    .challenge .challenge-info {
        padding: 10px;
    }

    .grid-item {
        width: 100%;
    }

    .content .cards .card-item {
        flex-direction: column;
    }

    .content .cards>div:nth-child(even) {
        flex-direction: column-reverse;
    }
}


@media only screen and (min-width: 1366px) {
    .mockup_two {
        height: 790px;
    }

    .mockup_four {
        height: 790px;
    }
}

.grid {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 40px;
    align-self: stretch;
    flex-wrap: wrap;
    width: 100%;
}

.grid-item {
    background: #FFF;
    display: flex;
    padding: 30px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.grid-item span {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 187.5% */
    letter-spacing: 1px;
}

@media only screen and (min-width: 1024px) {
    .grid-item {
        width: 40%;
    }

    .card-visual {
        width: 590px;
    }
}


.card-visual {
    display: flex;
    padding: 24px 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    background: #FFF;
}

.card-visual .items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    width: 100%;
}

.card-visual .item-one {
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    background: #FEF2F2;
    justify-content: space-between;
}

.card-visual .item-one span {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 214.286% */
    letter-spacing: 1px;
    flex: 1 0 0;
}


.card-visual .item-one .badge {
    display: flex;
    padding: 8px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #D4183D;
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
}

.card-visual .items .item-two {
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    background: #FEFCE8;
}

.card-visual .items .item-two span {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 214.286% */
    letter-spacing: 1px;
    flex: 1 0 0;
}

.card-visual .items .item-two .badge {
    display: flex;
    padding: 8px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #F0B100;
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 250% */
}

.card-visual .items .item-three {
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    background: #F0FDF4;
}

.card-visual .items .item-three span {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 214.286% */
    letter-spacing: 1px;
    flex: 1 0 0;
}

.card-visual .items .item-three .badge {
    display: flex;
    padding: 8px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #00C950;
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 250% */
}

.tech-items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tech-item-one {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tech-item-one span {
    color: #000;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 250% */
    letter-spacing: 1px;
    align-self: stretch;
}

.tech-item-two {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tech-item-two span {
    color: #000;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 250% */
    letter-spacing: 1px;
    align-self: stretch;
}

.boxes {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    width: 100%;
}

.tech-item-two .boxes {
    display: grid;
    grid-template-columns: repeat(2, 0.33fr);
}

.cards>div:nth-child(even) {
    flex-direction: row-reverse;
}


.card-item {
    display: flex;
    gap: 60px;
    /* align-self: stretch; */
}

.card-item .card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    flex: 1 0 0;
}

.card-item .card-info .card-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.card-item .card-info .card-heading .badge {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    aspect-ratio: 1/1;
    border-radius: 30px;
    background: #E1A314;
    color: #FFF;
    font-family: "Roboto Slab";
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
    /* 136.364% */
    letter-spacing: 1px;
}

.card-item .card-info .card-heading h2 {
    color: #000;
    font-family: "Roboto Slab";
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
    /* 93.75% */
    letter-spacing: 1px;
}

.card-item .card-info .points {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    align-self: stretch;
}

.card-item .card-info .points .each-point {
    display: flex;
    align-items: center;
    gap: 15px;
    align-self: stretch;
}

.card-item .visual {
    display: flex;
    /* width: 590px; */
    padding: 24px 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    background: #FFF;
    flex: 1 0 0;
}

.card-item .visual[data-id="fit-content"] {
    height: fit-content;
}

.card-visual .visual h2 {
    color: #E1A314;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 187.5% */
    letter-spacing: 1px;
}

.card-item .visual .visual-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.card-item .visual .visual-items .visual-item {
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 20px;
    align-self: stretch;

}

.visual-item span {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    /* 214.286% */
    letter-spacing: 1px;
    flex: 1 0 0;
}



#one {
    background: #FEF2F2;
}

#one.visual-item .badge {
    display: flex;
    padding: 8px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #D4183D;
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 250% */
}

#two {
    background: #FEFCE8;
}

#two.visual-item .badge {
    display: flex;
    padding: 8px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #F0B100;
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 250% */
}

#three {
    background: #F0FDF4;
}

#three.visual-item .badge {
    display: flex;
    padding: 8px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #00C950;
    color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 250% */
}

#mobile-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

#backend-solutions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.visual-item .options {
    display: grid;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    grid-template-columns: repeat(3, 1fr);

}

.visual-item .options .option {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    /* width: 166px; */
}

.visual-item .options .option h3 {
    color: #3C3C3C;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 214.286% */
    letter-spacing: 1px;
    align-self: stretch;
}

.visual-item .options .option span {
    color: #5F6368;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 300% */
    letter-spacing: 1px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.option[data-id='flutter'] {
    background: #EFF6FF;
}

.option[data-id='react-native'] {
    background: #ECFEFF;
}

.option[data-id='iOS'] {
    background: #F9FAFB;
}

.option[data-id='firebase'] {
    background: #FFF7ED;
}

.option[data-id='nodejs'] {
    background: #F0FDF4;
}

.ux-comparison {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
}

#navigation-clarity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.ux-comparison .header {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.ux-comparison .header>h3 {
    color: #000;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1px;
    flex: 1 0 0;
}

.ux-comparison .header>span {
    color: #5F6368;
    text-align: right;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 300% */
    letter-spacing: 1px;
}

.value {
    display: flex;
    height: 10px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.progress-bar {
    flex: 1 0 0;
    height: 10px;
    background-color: #E5E7EB;
    border-radius: 10px;
}

.progress[data-id='red'] {
    background-color: #FF6467;
    height: 100%;
    width: 30%;
    border-radius: 10px;

}

.progress[data='4'] {
    width: 40%;
}

.progress[data='6'] {
    width: 60%;
}


.progress[data-id='green'] {
    background-color: #00C950;
    height: 100%;
    width: 90%;
    border-radius: 10px;

}

.progress[data='8'] {
    width: 80%;
}

.circle-text {
    color: #5F6368;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 300% */
    letter-spacing: 1px;
    flex: 1 0 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.circle-text .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.circle-text .circle[data-id='red'] {
    background: #FF6467;
}

.circle-text .circle[data-id='green'] {
    background: #00C950;
}