/* =========================================
   ROOT
========================================= */

.hi-products-section {

  --hi-red: #e20203;
  --hi-black: #0a0a0a;
  --hi-dark: #151515;
  --hi-white: #ffffff;
  --hi-light: #f6f6f6;
  --hi-border: #dedede;

  width: 100%;
  padding: 0px 50px;

  

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  overflow: hidden;

}


.hi-products-container {

  width: 100%;
  max-width: 1300px;

  margin: auto;

}


/* =========================================
   HEADING
========================================= */

.hi-products-heading {

  max-width: 850px;

  margin: 0 auto 60px;

  text-align: center;

}


.hi-products-label {

  display: inline-block;

  margin-bottom: 14px;

  color: var(--hi-red);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2.5px;

  text-transform: uppercase;

}


.hi-products-heading h2 {

  margin: 0;

  color: var(--hi-black);

  font-size: 44px;

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -1px;

}


.hi-products-heading h2 span {

  display: block;

  color: #598313;

}


.hi-products-heading p {

  max-width: 760px;

  margin: 20px auto 0;

  color: #666;

  font-size: 15px;

  line-height: 1.85;

}


/* =========================================
   PRODUCTS GRID
========================================= */

.hi-products-grid {

  display: grid;

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

  gap: 28px;

}


/* =========================================
   PRODUCT CARD
========================================= */

.hi-product-card {

  position: relative;

  background: var(--hi-white);

  border: 1px solid var(--hi-border);

  overflow: hidden;

  transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;

}


/* Stylish red corner */

.hi-product-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 55px;
  height: 55px;

  border-top: 4px solid var(--hi-red);

  border-left: 4px solid var(--hi-red);

  z-index: 3;

  pointer-events: none;

}


.hi-product-card::after {

  content: "";

  position: absolute;

  right: 0;
  bottom: 0;

  width: 55px;
  height: 55px;

  border-right: 4px solid var(--hi-red);

  border-bottom: 4px solid var(--hi-red);

  z-index: 3;

  pointer-events: none;

}


.hi-product-card:hover {

  transform: translateY(-8px);

  border-color: #bbb;

  box-shadow:
    0 20px 45px rgba(0,0,0,.13);

}


/* =========================================
   PRODUCT IMAGE
========================================= */

.hi-product-image {

  position: relative;

  width: 100%;

  height: auto;
  overflow: hidden;

}


.hi-product-image img {

  width: 100%;
  height: auto;

  display: block;


  transition:
    transform .6s ease;

}


.hi-product-card:hover
.hi-product-image img {

  transform: scale(1.07);

}


/* Dark image overlay */

.hi-product-image::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  

 
  pointer-events: none;

}


/* =========================================
   PRODUCT NUMBER
========================================= */

.hi-product-number {

  position: absolute;

  right: 18px;
  bottom: 15px;

  z-index: 2;

  color: #fff;

  font-size: 30px;

  font-weight: 900;

  line-height: 1;

  opacity: .9;

}


/* =========================================
   PRODUCT CONTENT
========================================= */

.hi-product-content {

  padding: 28px 28px 0px;

}


.hi-product-category {

  display: block;

  margin-bottom: 9px;

  color: var(--hi-red);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;

}


.hi-product-content h3 {

  margin: 0 0 12px;

  color: var(--hi-black);

  font-size: 22px;

  line-height: 1.3;

  font-weight: 800;

}


.hi-product-content p {

  margin: 0;

  color: #666;

  font-size: 14px;

  line-height: 1.75;

}


/* =========================================
   RED LINE
========================================= */

.hi-product-line {

  width: 45px;

  height: 3px;

  margin-top: 22px;

  background: var(--hi-red);

  transition:
    width .4s ease;

}


.hi-product-card:hover
.hi-product-line {

  width: 85px;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

  .hi-products-section {

    padding: 75px 20px;

  }


  .hi-products-heading h2 {

    font-size: 38px;

  }


  .hi-products-grid {

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

    gap: 22px;

  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .hi-products-section {

    padding: 55px 15px;

  }


  .hi-products-heading {

    margin-bottom: 40px;

  }


  .hi-products-heading h2 {

    font-size: 31px;

  }


  .hi-products-heading h2 span {

    display: inline;

  }


  .hi-products-heading p {

    font-size: 14px;

    line-height: 1.75;

  }


  .hi-products-grid {

    grid-template-columns: 1fr;

    gap: 18px;

  }


  .hi-product-image {

    height: auto;

  }


  .hi-product-content {

    padding: 25px 22px 28px;

  }


  .hi-product-content h3 {

    font-size: 20px;

  }


}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

  .hi-products-heading h2 {

    font-size: 28px;

  }


  .hi-product-image {

    height: auto;

  }

}