/*
   _____                                    _
  / ____|                                  | |
 | (___  _ __   __ _  ___ ___  ___ ___   __| | ___
  \___ \| '_ \ / _` |/ __/ _ \/ __/ _ \ / _` |/ _ \
  ____) | |_) | (_| | (__  __/ (__ (_) | (_| |  __/
 |_____/| .__/ \__,_|\___\___|\___\___/ \__,_|\___|
        | |
        |_|

    ------------
    Version 0.1.23

*/

/* Shop */
.shop{
    border-radius: 41px;
    background: transparent;
    border: 1px solid var(--borderContainer);
    padding: 30px 30px 5px 30px;
}

.shop__card{
    filter: grayscale(1);
    margin-bottom: 25px;
    width: 100%;
    padding: 40px;
    background-color: var(--shopCard);
    border-radius: 28px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: right -30px top 10%;
    background-size: 200px;
    background-repeat: no-repeat;
    transition: .3s;
}

.shop__card:hover{
    transition: .3s;
    filter: grayscale(0);
}

.shop__card--title{
    font-weight: 600;
    font-size: 24px;
    color: var(--white);
}

.shop__card--description{
    font-weight: normal;
    font-size: 12px;
    color: var(--eula);
    margin-bottom: 40px;
}

.shop__card--href{
    display: flex;
    gap: 20px;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    color: var(--activeColor);
    transition: .3s;
}

.shop__card:hover .shop__card--href{
    gap: 25px;
    transition: .3s;
}

.shop__card--context{
    width: 50%;
}

.shop__header{
    padding: 100px 0 90px;
    width: 500px;
}

.shop__header--title{
    font-weight: 600;
    font-size: 40px;
    color: var(--white);
}

.shop__header--title span{
    color: var(--activeColor);
}

.shop__header__btn{
    display: flex;
    justify-content: space-between;
    width: 270px;
    gap: 30px;
    padding: 14px 30px 14px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    background: #2a2a2a;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    color: var(--shopCardColor);
    text-decoration: none;
    transition: .3s;
}

.shop__header__btn:hover{
    transition: .3s;
    background: var(--shopCardHover);
}

.shop__card--price{
    border: 1px solid var(--shopCardPrice);
    border-radius: 10px;
    text-align: center;
    font-weight: normal;
    font-size: 13px;
    color: var(--white);
    padding: 12px;
    margin-top: -15px;
    margin-bottom: 30px;
}

.shop__card--product{
    background-position: right -30px top 40%;
}

/* Responsive */
@media only screen and (max-width: 1100px) {
    .shop{
        padding: 20px 20px 7px 20px;
        margin: 0 5%;
    }

    .shop__card{
        padding: 40px 30px;
        margin-bottom: 15px;
        background-position: right -60px top 40% !important;
    }

    .shop__card:hover{
        transition: .3s;
        filter: grayscale(0);
    }

    .shop__card--context{
        width: 80%;
    }

    .shop__header{
        padding: 80px 5% 90px;
        width: auto;
    }

    .shop__header--title{
        font-size: 33px;
    }

    .shop__header__btn{
        font-size: 13px;
        padding: 17px 30px 17px 25px;
        gap: 10px;
        width: 250px;
    }

    .shop__card--price{
        width: 80%;
        padding: 12px;
    }

    .shop__card--product{
        background-position: right -30px top 40%;
    }
}

@media only screen and (max-width: 600px) {
    .shop{
        margin: 0;
    }
}

/* Last */
.last{
    margin-top: 70px;
}

.last__title{
    font-weight: 500;
    font-size: 20px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.last__title::after{
    content: "";
    width: 60px;
    height: 2px;
    background-color: var(--activeColor);
}

.last__container{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.last__box{
    border-radius: 12px;
    background: var(--shopCard);
    padding: 16px;
}

.last__box img{
    width: 30px;
    border-radius: 8px;
}

/* Responsive */
@media only screen and (max-width: 1100px) {
    .last{
        padding: 0 5%;
    }

    .last__box{
        padding: 12px;
    }

    .last__box img{
        width: 37px;
        border-radius: 8px;
    }
}