/*
========== 
Hero
==========
*/

.hero{
  margin-top: 100px;
  height: calc(100vh - 100px);
  background: linear-gradient(rgba(17, 0, 0, 0.7),rgba(17,0,0,.7)), url('../resources/images/website/whisky.webp');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  padding:0 8%;
  color: var(--white-color);
}

.hero-content{
  max-width:600px;
}

.hero h1{
  font-size:60px;
  margin-bottom:20px;
}

.hero p{
  font-size:18px;
  margin-bottom:30px;
  color: var(--silver-color);
}

.hero button{
  padding:15px 35px;
  border:none;
  background: var(--scarlet-color);
  color: var(--white-color);
  font-weight:600;
  cursor:pointer;
  border-radius:8px;
  transition:.3s;
}

.hero button:hover{
  transform:translateY(-3px);
}

/* 
==========
Categories 
==========
*/

.categories{
  padding:80px 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
  flex-wrap: wrap;
}

.category-card{
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:all ease-in-out .3s;
  position: relative;
  width: 250px;
  height: 140px;
  overflow: hidden;
}

.category-card:hover{
  transform:translateY(-5px);
}

.category-card img{
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  z-index: 0;
}

.category-card .border__categories{
  position: absolute;
  left: 1em;
  top: 1em;
  width: calc(100% - 2em);
  height: calc(100% - 2em);
  border: 1px solid var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  font-size: 1.5em;
}

/* 
==========
Products 
==========
*/

.products-section{
  padding:50px 8%;
}

.section-title{
  margin-bottom:40px;
}

.section-title h2{
  font-size:40px;
}

.products-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.product-card{
  background: var(--dark-color);
  border-radius:15px;
  overflow:hidden;
  transition:.3s;
}

.product-card:hover{
  transform:translateY(-5px);
}

.product-card img{
  width:100%;
  height:300px;
  object-fit:cover;
}

.product-info{
  padding:20px;
}

.product-info h3{
  margin-bottom:10px;
  color: var(--white-color);
}

.product-info p{
  color: var(--yellow-color);
  font-weight:1000;
  margin-bottom:15px;
}

.product-info button{
  width:100%;
  padding:12px;
  border:none;
  background:var(--scarlet-color);
  color:var(--white-color);
  font-weight:600;
  cursor:pointer;
  border-radius:8px;
}

/* 
==========
Responsive styles.
==========
*/

@media(max-width:768px){

  nav{
    display:none;
  }

  .hero h1{
    font-size:42px;
  }
}