@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: lato;

}
body{
    background-color:#f9fefe;
}
:root{
    --brand-color: rgb(245, 219, 73);
}
/**** Header ****/

.header{
    display: grid;
    grid-template-areas: ". . ." ". uno ." ;
    height: 82vh;
    background: #fff fixed no-repeat;
    background-image: url("../img/bg-cover.gif");
}
.header__wrapper{
    grid-area: uno;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    overflow: hidden;
    text-align: center;
}

.brand__name{
    font-size: 15ch;
    font-family: 'Oswald', sans-serif;
    line-height: 8.5rem;
    margin-bottom: 1rem;
    color: var(--brand-color);
}

.header span{
    font-weight: 700;
    letter-spacing: 2px;
    color: bisque;
}

.header__brand-slogan{
    display: inline-block;
    min-width: 15ch;
}

/**** Category ****/
.div2{
    display: flex;
    gap: 10px;
    overflow-x: scroll;
    position: sticky;
    top: 0px;
    z-index: 50;
}
.div2::-webkit-scrollbar{
    margin: 4px;
    width: auto;
    height: 6px;
    background: transparent;
}
.div2::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: rgba(26, 26, 26, 0.2);
}
a{
    text-decoration: none;
}
.categories{
    flex: 1 0 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    border-radius: 5px;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 6px;
    box-shadow: rgba(21, 21, 21, 0.2) 0 0 10px;
    padding: 1.5rem;
    max-height: 6rem;
    background-size: 100%;
    background-position: right;
    background-repeat: no-repeat;
}

.categories__pesas{
    background-image: url('../img/categories__pesas.jpg') ;
}

.categories__discos{
    background-image: url('../img/categories__discos.jpg') ;
}
.categories__barras{
    background-image: url('../img/categories__barra.jpg') ;
}
.categories__accesorios-gym{
    background-image: url('../img/categories__articulos.jpg') ;
}
.categories__title{
    font-weight:bold;
    color: var(--brand-color);
    font-size: 1.5rem;
    text-transform: uppercase;
}
/**** PRODUCTS ****/

.products__wrapper{
    margin: 15px auto 15px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: center;
}

.card-product{
    flex: 0 1 20%;
    height: 300px;
    min-width: 170px;
    max-width: 250px;
    max-height: 250px;
    border-radius: 5px;
    border: 1px solid #9999;
    background-color: #fff;
    transition: .4s ease  box-shadow, transform .2s ease;

}
.card-product:hover{
    box-shadow: rgba(21, 21, 21, 0.3) 0 0 8px;
    transform: scale(1.050);
}
.card-product__img{
    height: 80%;
    overflow: hidden;
}
.card-product__img-element{
    margin-left: 50%;
    transform: translate(-50%);
    height: 100%;
}
.card-product__name{
    font-family: lato;
    font-size: 12px;
    text-transform: uppercase;
    width: 100%;
    padding: 10px;
    word-wrap: wrap;
}
/**** FOOTER ****/
footer{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    background: #fff fixed no-repeat;
    background-image: url("../img/bg-cover.gif");
    color: blanchedalmond;
    height: 30vh;

}
svg{
    width: 100px;
    margin-bottom: 20px;
}

/**** whatsapp floating bottom ****/
.fa-whatsapp {
    background-color: #25D366;
    border-radius: 50%;
    padding-top: 9px;
    -webkit-box-shadow: 0 0 10px rgba(19, 19, 19, 0.2);
    box-shadow: 0 0 10px rgba(19, 19, 19, 0.2);
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 2rem;
    color: white;
    z-index: 100;
    height: 50px;
    width: 50px;
    text-align: center;
    transition: transform .2s ease, background-color .2s ease;
  }
 .fa-whatsapp:hover{
    transform: scale(1.050);
    background-color: #20b657;

 }

/**** Product Category****/
.Product__category-wrapper{
    /* width: 100%; */
    height: fit-content;
    max-height: 150px;
    background: #b49e65;
    overflow: hidden;   

}

.Product__category{
    height: 100%;
}
.category-cover__name{
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    color: #fff;
    line-height: 15vw;
    font-size: 25vmin;
}
#accesorios_gym .category-cover__name{
    font-size: calc(10vw);