/* LIMA ROCK MAIN CSS */

body {
    background:#080808;
    color:#fff;
}


/* HEADER */

header {
    background:#000;
    border-bottom:1px solid #222;
    padding:20px 0;
}


.logo a {
    font-size:32px;
    font-weight:bold;
    color:#fff;
    letter-spacing:2px;
}


nav ul {
    list-style:none;
    display:flex;
    gap:25px;
}


nav a {
    color:#fff;
    font-weight:bold;
    transition:.3s;
}


nav a:hover {
    color:#c40000;
}



/* HERO */

.hero {

    min-height:500px;

    display:flex;

    align-items:center;

    background:
    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.9)
    ),
    url('../images/hero.jpg');

    background-size:cover;

    background-position:center;

}



.hero h1 {

font-size:60px;

text-transform:uppercase;

margin-bottom:20px;

}



.hero p {

font-size:22px;

color:#ccc;

}



.btn {

display:inline-block;

background:#b00000;

padding:15px 35px;

margin-top:30px;

border-radius:5px;

font-weight:bold;

}



.btn:hover {

background:#e00000;

}



/* TITULOS */

h2 {

font-size:35px;

margin:50px 0 30px;

border-left:5px solid #b00000;

padding-left:15px;

}



/* PRODUCTOS */

.products {

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;

}



.product {

background:#111;

padding:20px;

border:1px solid #222;

}



.product:hover {

border-color:#b00000;

}