main{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}

.carasoul {
    width: 95%;
    border: 3px solid var(--border);
    padding: 10px 0;
    background-color: #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    border-radius: 25px;
    display: flex;
    overflow-x: auto;
    font-size: 2rem;
    min-height: fit-content;
    height: auto;
}

.carasoul::-webkit-scrollbar{
    display:none;
}

.group{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1em;
    animation: spin 10s infinite linear;
    padding-right:1em;
}

.card {
    flex: 0 0 15rem;
    height: 60px;
    padding: .5em;
    background-color: var(--primary);
    color: white;
    flex-wrap:wrap;
    text-align: center;
    align-content: center;
}

@keyframes spin{
    from {translate:0;}
    to{translate:100%}
}

.abg{
    display:grid;
    grid-template-columns: repeat(auto-fit , 250px);
    width:95%;
    margin: 70px 0;
    gap:1em;
    justify-content:center;
}

.ab{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border:2px solid var(--border);
    border-radius:25px;
    background-color:#fff;
}

.abi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    width:100%;
    padding:.1em;
    border-bottom:2px solid var(--border);
}

.abi svg{
    width:75px;
    height:75px;
    fill:var(--primary);
}

.abd{
    padding:.5em;
}

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, 250px);
    width: 95%;
    margin: 70px 0;
    gap: 1em;
    justify-content: center;
}

.plan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--border);
    border-radius: 25px;
    background-color: #fff;
}

.plan-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: .5em;
    border-bottom: 2px solid var(--border);
}

    .plan-info label {
        font-size: 2rem;
    }

        .plan-info label > span {
            font-size: 2rem;
        }

.plan-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.plan-detail svg{
    fill: var(--primary) !important;
}

.plan-detail{
    padding:.5em;
    font-size:1.3rem;
    color:var(--secondary);
}

.plan button {
    margin-bottom:10px;
    width:90%;
    border-radius:25px;
    border:1px solid var(--border);
    background-color:var(--success);
    color:white;
}