#infographic .circle {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 7px double;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px;
    
    margin: 0px 0;
}
.system {
    --bs-text-opacity: 1;
    color: #1ba4e2;
}

#infographic section:nth-child(odd) .circle {
    transform: translateX(-100%);
}

#infographic article {
    max-width: 400px;
    margin-bottom: 55px;
    cursor: pointer;
   
    position: relative;
}

    #infographic article header {
        border-top-right-radius: 30px;
        /* border-bottom-right-radius: 30px; */
        padding: 13px;
        justify-content: space-between;
    }

        #infographic article header i {
            display: flex;
            font-size: 2em;
            border-radius: 50%;
            background-clip: padding-box;
            padding: 14px;
            transition: transform 0.4s;
            color: #fff;
            border: 16px solid var(--bs-dark);
            margin: -16px 0 -16px -20px;
        }

    #infographic article:hover header i {
        transform: scale(1.2);
    }

    #infographic article.active header i {
        transform: none;
    }

    #infographic article .body {
       
        padding: 0 20px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        max-height: 0;
        transition: max-height 0.5s, padding 0.5s;
        overflow: hidden;
    }

        #infographic article .body .btn {
            padding: 3px 10px;
            text-transform: uppercase;
        }

#infographic :nth-child(even) article {
    text-align: right;
    transform: translateX(-100%);
}

    #infographic :nth-child(even) article header {
        flex-flow: row-reverse;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

        #infographic :nth-child(even) article header i {
            margin: -16px -20px -16px 0;
        }

#infographic section:nth-child(odd) article.active header {
    border-bottom-right-radius: 0;
}

#infographic section:nth-child(even) article.active header {
    border-bottom-left-radius: 0;
}

#infographic article.active .body {
    padding: 10px;
    max-height: 200px;
    border: 1px solid;
    text-align:center;
}



#infographic article[data-step="1"] {
    margin-right: 0px;
}

#infographic article[data-step="2"] {
    margin-left: 66px;
}   

#infographic article[data-step="3"] {
    margin-left: 61px;
}

#infographic article[data-step="4"] {
    margin-left: 66px;
}

#infographic article[data-step="5"] {
    margin-left: 22px;
}

#infographic article[data-step="6"] {
    margin-left: -5px;
}

#infographic article[data-step="7"] {
    margin-left: 62px;
}

#infographic article[data-step="8"] {
    margin-left: -0px;
}

#infographic article[data-step="9"] {
    margin-left: 0px;
}

#infographic article[data-step="10"] {
    margin-left: -66px;
}

#infographic article[data-step="11"] {
    margin-left: -66px;
}

#infographic article[data-step="12"] {
    margin-left: 0px;
}

#infographic article[data-step="13"] {
    margin-left: 14px;
}

#infographic article[data-step="14"] {
    margin-left: 62px;
}

#infographic article[data-step="15"] {
    margin-left: -130px;
}

#infographic article[data-step="16"] {
    margin-left: -100px;
}

#infographic article[data-step="17"] {
    margin-left: -26px;
}

#infographic article[data-step="18"] {
    margin-left: 10px;
}

#infographic article[data-step="19"] {
    margin-left: 30px;
}

#infographic article[data-step="20"] {
    margin-left: 61px;
}

#infographic article[data-step="21"] {
    margin-left: 22px;
}

#infographic article[data-step="22"] {
    margin-left: -5px;
}

#infographic article[data-step="23"] {
    margin-left: 62px;
}

#infographic article[data-step="24"] {
    margin-left: -0px;
}

#infographic article[data-step="25"] {
    margin-left: -60px;
}

#infographic article[data-step="26"] {
    margin-left: -66px;
}

#infographic article[data-step="27"] {
    margin-left: -66px;
}



@media only screen and (min-width:321px) and (max-width:991px) {
    #infographic article[data-step="1"] {
        margin-left: 0px;
    }

    #infographic article[data-step="2"] {
        margin-left: 0px;
    }

    #infographic article[data-step="3"] {
        margin-left: 0px;
    }

    #infographic article[data-step="4"] {
        margin-left: 0px;
    }

    #infographic article[data-step="5"] {
        margin-left: 0px;
    }

    #infographic article[data-step="6"] {
        margin-left: 0px;
    }

    #infographic article[data-step="7"] {
        margin-left: 0px;
    }

    #infographic article[data-step="8"] {
        margin-left: 0px;
    }

    #infographic article[data-step="9"] {
        margin-left: 0px;
    }

    #infographic article[data-step="10"] {
        margin-left: 0px;
    }

    #infographic article[data-step="11"] {
        margin-left: 0px;
    }

    #infographic article[data-step="12"] {
        margin-left: 0px;
    }

    #infographic article[data-step="13"] {
        margin-left: 0px;
    }

    #infographic article[data-step="14"] {
        margin-left: 0px;
    }

    #infographic article[data-step="15"] {
        margin-left: 0px;
    }

    #infographic article[data-step="16"] {
        margin-left: 0px;
    }

    #infographic article[data-step="17"] {
        margin-left: 0px;
    }

    #infographic article[data-step="18"] {
        margin-left: 0px;
    }

    #infographic article[data-step="19"] {
        margin-left: 0px;
    }

    #infographic article[data-step="20"] {
        margin-left: 0px;
    }

    #infographic article[data-step="21"] {
        margin-left: 0px;
    }

    #infographic article[data-step="22"] {
        margin-left: 0px;
    }

    #infographic article[data-step="23"] {
        margin-left: 0px;
    }

    #infographic article[data-step="24"] {
        margin-left: 0px;
    }

    #infographic article[data-step="25"] {
        margin-left: 0px;
    }

    #infographic article[data-step="26"] {
        margin-left: 0px;
    }

    #infographic article[data-step="27"] {
        margin-left: 0px;
    }
}
#infographic article header1 {
    border-top-left-radius: 30px;
    /* border-bottom-right-radius: 30px; */
    padding: 13px;
    justify-content:space-between;
}