.cards .toggle {
    margin-top: 2rem;
    color: hsl(234, 14%, 74%);
    display: flex;
    align-items: center;
}

.cards .toggle-btn {
    margin: 0 1rem;
}

.cards{
    font-family: "Open Sans", sans-serif;

    width: 100%;
    position: relative;
    margin-top: 2rem;

    grid-template-columns: repeat(auto-fit, 330px);

    display: grid;
    row-gap: 4vh;
    column-gap: 2vw;  
    justify-content: center;
}
.card.player {
    background: #fff;
    color: hsl(233, 13%, 49%);
    border-radius: 15px;
    width: 330px;
    height: 500px;
    position: relative;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
}

.card.active {
    background: linear-gradient(
      135deg,
      rgba(163, 168, 240, 1) 0%,
      rgba(105, 111, 221, 1) 100%
    );
    
    color: #fff;
    z-index: 1;
}

.cards ul {
    margin: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.cards ul li {
    list-style-type: none;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    justify-content: center;
}

.cards ul li i{
    color: hsl(233, 13%, 49%);
    margin-right: 12px;
}

.cards ul li.price {
    font-size: 3rem;
    color: hsl(232, 13%, 33%);
    padding-bottom: 2rem;
}

.shadow {
    transition: all 300ms;
}

.shadow:hover{
    box-shadow: 0 2px 15px #8c8c8c;
}
  
.card.active .price {
    color: #fff;
}

.bottom-bar {
    position: relative;
    justify-content: left;
}

.pack {
    font-size: 30px;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    font-weight: 600;
    border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}





/* brands cards and container */

.container-brands{
    height: 350px;
    width: 102vh;
    margin: 0 auto;
    display: none;
    min-width: 65%;
}

.container-brands li{
    display: flex;
    justify-content: center;
}


.container-brands .card.company{
    background: #fff;
    color: hsl(233, 13%, 49%);
    border-radius: 15px;
    width: 95%;
    height: 305px;
    position: relative;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    padding: 30px;
}


.container-brands .card.company .title{
    width: 100%;
    height: max-content;
    margin-top: 2rem;
    font-size: 30px;
    margin-bottom: 2.5rem;
    font-weight: 600;
    border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
    text-align: center;
    padding-bottom: 10px;
}

.container-brands .card.company p{
    font-size: 16px;
    line-height: 25px;
}

/* ----------------------------------- */

.container-player{
    display: none;
    height: 570px;
    width: 93%;
    margin: 0 auto;
}

.container-player .card ul {
    margin: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.container-player .card ul li {
    list-style-type: none;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    justify-content: center;
    /* margin-top: 2rem; */
}

.container-player .card ul li i{
    color: hsl(233, 13%, 49%);
    margin-right: 12px;
}

.container-player .card ul li.price {
    font-size: 3rem;
    color: hsl(232, 13%, 33%);
    padding-bottom: 2rem;
}

/* .container-player ul{
    margin: 0;
}

.container-player li{
    display: initial;
    padding: 0;
    width: unset;
} */


@media screen and (max-width: 850px) {
    .container-brands{
        height: 370px;
        width: 100%;
    }

    .container-brands .card.company{
        height: 360px;
        width: 96%;
    }

    .container-brands .splide__track{
        height: 380px !important;
    }




    .container-player{
        display: block;
    }

    .cards.athletes{
        display: none;
    }

    .container-player .splide__track{
        height: 495px !important;
    }



    .card.player{
        width: 90%;
        margin: 0 auto;
        height: 450px;
    }

    .splide__pagination{
        bottom: 0 !important;
    }

}