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

    ------------
    Version 0.1.21

*/

/* Social */
.social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 50px 10%;
}

.social__card{
    background: #4045CC;
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.social__card:hover{
    background: #4d52ea;
    transition: .3s;
}

.social__card img{
    width: 40px;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

@media only screen and (max-width: 1300px) {

}

/* Info */
.info{
    background: #f2f2f2;
    padding: 80px 10%;
}

.info__cards .row>*{
    padding: 0!important;
}

.info__title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
}

.info__title h2{
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
}

.info__title .hr{
    background: #e71ab7;
    width: 80px;
    height: 8px;
}

.row .col-lg-4:nth-child(3) .info__card{
    border-width: 0 0px 2px 0;
}

.row .col-lg-4:nth-child(4) .info__card,
.row .col-lg-4:nth-child(5) .info__card{
    border-width: 0 2px 0 0;
}

.row .col-lg-4:nth-child(6) .info__card{
    border-width: 0;
}

.info__card{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 50px;
    align-items: center;
    flex-direction: column;
    min-height: 300px;
    border-width: 0 2px 2px 0;
    border-color: rgba(160, 160, 160, 0.44);
    border-style: solid;
}

.info__card img{
    width: 50px;
    margin-bottom: 30px;
    /* filter: invert(27%) sepia(75%) saturate(2958%) hue-rotate(232deg) brightness(81%) contrast(97%); */
}

.info__card h2{
    font-size: 27px;
    font-weight: 700;
}

.info__card p{
    color: #5a5a5d;
    font-weight: 400;
}

@media only screen and (max-width: 991px) {
    .row .info__card{
        border-width: 0 0 2px 0!important;
    }

    .row .col-lg-4:nth-child(6) .info__card{
        border-width: 0!important;
    }
}

/* Trailer */
.trailer{
    padding: 100px 0;
}

.trailer__info{
    padding-left: 50px;
}

.trailer__info h1{
    font-weight: 700;
}

.trailer__info  p{
    max-height: 200px;
    overflow: auto;
    font-weight: 500;
    margin-bottom: 50px;
}

@media only screen and (max-width: 1201px) {
    .trailer__info{
        padding-left: 10px;
        margin: 0;
    }

    .trailer{
        padding: 35px 7%;
    }

    .trailer iframe{
        height: 280px;
        margin-bottom: 20px;
    }
}

/* Tops */
.tops{
    padding: 20px 0 80px;
}
.tops h1{
    font-weight: 700;
    margin-bottom: 20px;
}

.tops__heads img{
    margin: 10px 10px 10px 0;
}

.tops__buyers--card{
    background: #e9e9e959;
    padding: 40px 30px 0;
}

.tops__buyers--card img{
    width: 160px;
}

.tops__buyers--card h2{
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 20px;
}

.tops__buyers--card h5{
    font-size: 16px;
}

.tops__buyers--card h3{
    font-weight: bold;
    color: #246deb;
    margin-bottom: 20px;
}

@media only screen and (max-width: 1201px) {
    .tops{
        padding: 0px 7% 80px;
    }

    .tops h1{
        margin-top: 50px;
    }

    .tops__heads img{
        width: 55px;
    }

    .tops__buyers--card h3{
        margin-bottom: 40px;
    }

}

/* Shop */
.shop{
    padding: 0px 0 100px;
}

.shop__title{
    display: flex;
    align-items: center;
    gap: 30px;
}

.shop__title .hr{
    background: #246deb;
    min-width: 60px;
    height: 8px;
}

.shop__title h1{
    font-weight: 800;
}

.nav-pills{
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    padding: 0;
    color: #246deb;
    background: rgba(54, 54, 54, 0);
    transition: .5s;
    min-width: 100px;
    max-width: 120px;
    font-weight: 600;
}

.nav-pills .nav-link{
    font-weight: 500;
    color: #646464;
    transition: .5s;
    min-width: 100px;
    max-width: 120px;
}

.nav-pills .nav-link:nth-child(1){
    margin-left: -15px;
}

.shop__header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.btn__voucher{
    background: #e9e9e966!important;
    color: #686868!important;
    font-weight: 500;
}

.btn__voucher:hover{
    background: rgba(233, 233, 233, 0.72);
}

.btn__voucher img{
    filter: invert(43%) sepia(0%) saturate(4504%) hue-rotate(14deg) brightness(94%) contrast(93%);
}

.shop__products{
    margin-top: 30px;
}

.card__img{
    background: #e9e9e959;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.shop__card{
    margin-bottom: 50px;
}

.card__img img{
    width: 120px;
}

.shop__card h2{
    margin-top: 25px;
    font-weight: 700;
    font-size: 25px;
}

.shop__card p{
    color: #5d5d5d;
    font-weight: 500;
    margin-bottom: 30px;
}

@media only screen and (max-width: 1201px) {
    .shop{
        padding: 50px 7% 20px;
    }
    
    .btn__voucher{
        margin-top: 20px;
    }
}