/* variables */
:root{
    --first-color : #B80C09;
    --second-color: #01BAEF;
    --third-color:  #FBFBFF;
    --fourth-color: #040F16;
    
}

*{
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}
ul{
    list-style: none;
    padding-left:1rem;
}
a{
    text-decoration: none;
}

/* navbar */
.navegacion{
    background-color:var(--third-color);
}
.navegacion hr{
    color: var(--first-color);
}

.navbar-icons{
    display: flex;
    font-size:20px; 
}
.navbar-icons a{
    margin: 0px 10px;
    text-decoration: none;
    color: var(--second-color);
    transition: all .2s ease-in-out;
}
.navbar-icons a:hover{
    transform: scale(120%);
}
.btn-search{
    background:var(--second-color);
    color: var(--third-color);
}
.btn-search:hover{
    background:#1299be;
    color: var(--third-color);
}

/* breadcrumb */

.breadcrumb-section .breadcrumb li:first-child a{
    text-decoration:none;
    color:var(--fourth-color);
    font-weight: bold;
    
}

/* hero slider*/

@media(max-width:516px){
    .carousel-item{
        height:200px;
        width:100%;
    }
}


/* beneficios */
.beneficios .beneficio-icono{
    display: flex;
    align-items: center;
   
}
.beneficios .beneficio-texto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.beneficios .beneficio-texto h5{
    color: var(--second-color);
}

.beneficios .beneficio-texto p{
    color: var(--fourth-color);
}
.beneficios i{
    font-size:2em;
    color: var(--second-color);
    
}


/* categorias*/
.categories h4{
    color:var(--fourth-color);
}
.categories .carousel-control-prev{
    height:60px;
    width:30px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto 0 auto -50px;
    border-radius:5px;
}
.categories .carousel-control-next{
    height:60px;
    width:30px;
    margin-right:-100px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto -50px auto 0;
    border-radius:5px;
}
.categories .card img{
    height:80%;
    width:100%;
    transition: all .3s ease-in-out;
}
.categories .card .card-title{
    text-align: center;
    color: var(--fourth-color);
    transition: all .3s ease-in-out;
    margin-top:10px;
}
.categories .card{
    height:330px;
    transition: all .3s ease-in-out;
    padding:10px;
}
.categories .card:hover img{
    transform: scale(105%);
}
.categories .card:hover .card-title{
    text-align: center;
    color: var(--second-color);
    transform: scale(105%);
}

/* categorias-responsive */

.categories-responsive h4{
    color:var(--fourth-color);
}
.categories-responsive .carousel-control-prev{
    height:60px;
    width:30px;
    z-index:1;
    position: absolute;
    top:70px;
    left:0;
    border-radius:5px;
    color:var(--second-color);
    
}

.categories-responsive .carousel-control-next{
    height:60px;
    width:30px;
    position: absolute;
    top:70px;
    right:0;
    z-index:1;
    border-radius:5px;
    color:var(--second-color);
}
.categories-responsive .card img{
    height:80%;
    width:80%;
    transition: all .3s ease-in-out;
    margin:auto;
}
.categories-responsive .card .card-title{
    text-align: center;
    color: var(--fourth-color);
    transition: all .3s ease-in-out;
}
.categories-responsive .card{
    height:200px;
    transition: all .3s ease-in-out;
    padding:10px;
}
.categories-responsive .card:hover img{
    transform: scale(105%);
}
.categories-responsive .card:hover .card-title{
    text-align: center;
    color: var(--second-color);
    transform: scale(105%);
}


/* offers countdown*/
.countdown-offers .countdown{
    display:flex;
    flex-direction: column;
    color: var(--third-color);
    background-color: var(--fourth-color);
    padding: 15px 0px;
    text-align: center;
    font-size: 8vw;
}


.countdown-offers .countdown .col-2 h1{
    background: var(--second-color);
    border-radius:  10px;
    
}

/* productos populares */
.popular-products h4{
    color:var(--fourth-color);
}
.popular-products .card{
    border:none;
}
.popular-products .card{
    transition: all .3s ease-in-out;
    padding:10px;
}
.popular-products .card:hover {
    transform: scale(105%);
    cursor: pointer;
}
.popular-products .carousel-control-prev{
    height:60px;
    width:30px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto 0 auto -50px;
    border-radius:5px;
}
.popular-products .carousel-control-next{
    height:60px;
    width:30px;
    margin-right:-100px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto -50px auto 0;
    border-radius:5px;
}
.popular-products img{
    height:150px;
    width:100%;
    transition: all .3s ease-in-out;
}

.popular-products .card .card-title{
    text-align: center;
    transition: all .3s ease-in-out;
    margin-top:10px;
    color: var(--fourth-color);
}

.popular-products .card:hover .card-title{
    color: var(--second-color);
    transform: scale(105%);
}

.popular-products .card .estrellas{
    color:var(--fourth-color);
}
.popular-products .card .ex-precio{
    font-size:1.1em;
    text-align: end;
    margin-top:3px;
    color: var(--fourth-color);
}

.popular-products .card .precio{
    color:var(--second-color);
    font-size:1.3em;
}

.popular-products .card .addCartButton{
    background: var(--second-color);
    color:var(--third-color);
}

/* productos populares responsive */
.popular-products-responsive h4{
    color:var(--fourth-color);
}
.popular-products-responsive .carousel-item{
    height:500px;
}
.popular-products-responsive .card{
    border:none;
}
.popular-products-responsive .card{
    transition: all .3s ease-in-out;
    padding:10px;
}
.popular-products-responsive .card:hover {
    transform: scale(105%);
    cursor: pointer;
}
.popular-products-responsive .carousel-control-prev{
    height:60px;
    width:30px;
    position: absolute;
    top:170px;
    z-index:1;
    color:var(--second-color);
}
.popular-products-responsive .carousel-control-next{
    height:60px;
    width:30px;
    position: absolute;
    top:170px;
    z-index:1;
    color:var(--second-color);
   
}
.popular-products-responsive .card img{
    height:250px;
    width:100%;
    transition: all .3s ease-in-out;
}

.popular-products-responsive .card .card-title{
    text-align: center;
    color: var(--fourth-color);
    transition: all .3s ease-in-out;
    margin-top:10px;
}

.popular-products-responsive .card:hover .card-title{
    color: var(--second-color);
    transform: scale(105%);
}
.popular-products-responsive .card .estrellas{
    color:var(--fourth-color);
}
.popular-products-responsive .card .ex-precio{
    font-size:1.1em;
    text-align: end;
    margin-top:3px;
    color: var(--fourth-color);
}

.popular-products-responsive .card .precio{
    color:var(--second-color);
    font-size:1.3em;
}

.popular-products-responsive .card .addCartButton{
    background: var(--second-color);
    color:var(--third-color);
}



/* other-products */
.other-products h4{
    color:var(--fourth-color);
}
.other-products .card{
    border:none;
}
.other-products .card{
    transition: all .3s ease-in-out;
    padding:10px;
}
.other-products .card:hover {
    transform: scale(105%);
    cursor: pointer;
}
.other-products .carousel-control-prev{
    height:60px;
    width:30px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto 0 auto -50px;
    border-radius:5px;
}
.other-products .carousel-control-next{
    height:60px;
    width:30px;
    margin-right:-100px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto -50px auto 0;
    border-radius:5px;
}
.other-products img{
    height:150px;
    width:100%;
    transition: all .3s ease-in-out;
}

.other-products .card .card-title{
    text-align: center;
    color: var(--fourth-color);
    transition: all .3s ease-in-out;
    margin-top:10px;
}

.other-products .card:hover .card-title{
    color: var(--second-color);
    transform: scale(105%);
}
.other-products .card .estrellas{
    color:var(--fourth-color);
}
.other-products .card .ex-precio{
    font-size:1.1em;
    text-align: end;
    margin-top:3px;
    color: var(--fourth-color);
}

.other-products .card .precio{
    color:var(--second-color);
    font-size:1.3em;
}

.other-products .card .addCartButton{
    background: var(--second-color);
    color:var(--third-color);
}
/* FAQ */
.faq{
    background: #040F16;
}
.faq p{
    color: #FBFBFF;
}

/* Contact */
.contact h2{
    color: #040F16;
}
.contact .btn{
    background: #040F16;
    color: #FBFBFF;
}




/* footer */
footer{
    background: #040F16;
    color: #FBFBFF;
}


/* cart */
.cart .cart-left .cart-item{
    color:var(--fourth-color);
}
.cart .cart-left .cart-item h4{
    color:var(--second-color);
}
.cart .cart-right .procederButton{
    background: var(--second-color);
}
.cart .cart-right .seguirComprandoButton{
    background: var(--fourth-color);
    color:var(--third-color);
}


/* media queries index.html*/
@media(max-width:769px){
    .categories-responsive{
        display:block;
    }
    .categories{
        display: none;
    }
    .logo{
        width:60px;
        height:60px;
    }
    .logo img{
        width:65%;
    }
    
}
@media(min-width:769px){
    .categories-responsive{
        display:none;
    }
    .categories{
        display: block;
    }
}

@media(max-width:969px){
    .popular-products-responsive{
        display:block;
    }
    .popular-products,.other-products,.related-products{
        display: none;
    }
}
@media(min-width:969px){
    .popular-products-responsive{
        display:none;
    }
    .popular-products{
        display: block;
    }
}


/*----------------------------- PRODUCTS PAGE CSS -------------------*/


.productos a{
    text-decoration: none;
}
.productos .filtros a{
    font-weight: bold;
    color: var(--fourth-color);
    font-size:20px;
}

.productos h4{
    color:var(--fourth-color);
}
.productos .card{
    border:none;
}
.productos .card{
    transition: all .3s ease-in-out;
    padding:10px;
}
.productos .card:hover {
    transform: scale(105%);
    cursor: pointer;
}

.productos img{
    height:150px;
    width:100%;
    transition: all .3s ease-in-out;
}
.productos .card{
    background: rgba(248,249,250,1);
}
.productos .card .card-title{
    text-align: center;
    color: var(--fourth-color);
    transition: all .3s ease-in-out;
    margin-top:10px;
}

.productos .card:hover .card-title{
    color: var(--second-color);
    transform: scale(105%);
}
.productos .card .estrellas{
    color:var(--fourth-color);
}
.productos .card .ex-precio{
    font-size:1.1em;
    text-align: end;
    margin-top:3px;
    color: var(--fourth-color);
}

.productos .card .precio{
    color:var(--second-color);
    font-size:1.3em;
}

.productos .card .addCartButton{
    background: var(--second-color);
    color:var(--third-color);
}


/* ----------------SINGLE-PRODUCT-PAGE-CSS--------------- */

/* single-product */
.product .product-info .prices{
    font-size:2rem;
}
.product .product-info span{
    color:var(--second-color);
}

/* productos relacionados para comprar */
.related-products h4{
    color:var(--fourth-color);
}
.related-products .card{
    border:none;
}
.related-products .card{
    transition: all .3s ease-in-out;
    padding:10px;
}
.related-products .card:hover {
    transform: scale(105%);
    cursor: pointer;
}
.related-products .carousel-control-prev{
    height:60px;
    width:30px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto 0 auto -50px;
    border-radius:5px;
}
.related-products .carousel-control-next{
    height:60px;
    width:30px;
    margin-right:-100px;
    background: var(--second-color);
    position: absolute;
    top:0;
    bottom:0;
    z-index:1;
    margin: auto -50px auto 0;
    border-radius:5px;
}
.related-products img{
    height:150px;
    width:100%;
    transition: all .3s ease-in-out;
}

.related-products .card .card-title{
    text-align: center;
    color: var(--fourth-color);
    transition: all .3s ease-in-out;
    margin-top:10px;
}

.related-products .card:hover .card-title{
    color: var(--second-color);
    transform: scale(105%);
}
.related-products .card .estrellas{
    color:var(--fourth-color);
}
.related-products .card .ex-precio{
    font-size:1.1em;
    text-align: end;
    margin-top:3px;
    color: var(--fourth-color);
}

.related-products .card .precio{
    color:var(--second-color);
    font-size:1.3em;
}

.related-products .card .addCartButton{
    background: var(--second-color);
    color:var(--third-color);
}