/*
* New Home Page Styles
*/

.new-home-page .page-tabs-block {
  margin-top: 6rem;
}

.new-home-page-heading-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 3rem;
}

.new-home-page-heading {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0;
  color: #424242;
  line-height: normal;
  padding: 2rem 1rem 0 1rem;
}

/*
* Review Card
*/
.customer-review {
  clear: both;
  padding: 0rem 1.25rem 4rem 1.25rem;
  box-sizing: border-box;
}

.new-home-page .customer-review-card-container {
  display: grid;
  gap: 1rem;
  row-gap: 3.5rem;
  margin-top: 2rem;
  box-sizing: border-box;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.new-home-page .customer-review-card {
  /* background: #ffffff; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  height: 100%;
  min-height: 100%;
}

.new-home-page .customer-review-card-container .top-section {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 100%;
  padding: 2rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid #ebe9e8;
  padding-bottom: 4rem;
}

.new-home-page .customer-review-card-container .top-section q {
  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 2rem;
}

.new-home-page .customer-review-card-container .top-section .icon {
  height: 4rem;
  width: 4rem;
  border-radius: 0.375rem;
  border: 1px solid #ebe9e8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-home-page .customer-review-card-container .top-section .icon img {
  height: 2rem;
  width: 2rem;
}

.new-home-page .customer-review-card-container .bottom-section {
  background: #ffffff;
  border-radius: 0.375rem;
  border: 1px solid #ebe9e8;
  box-shadow: 0px 12px 5px rgba(0, 0, 0, 0.01), 0px 7px 4px rgba(0, 0, 0, 0.05),
    0px 3px 3px rgba(0, 0, 0, 0.09), 0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 0px 0px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
  height: 4rem;
  /* margin-top: -3rem; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
  right: 2rem;
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
}

.new-home-page .customer-review-card-container .bottom-section img {
  height: 2rem;
  width: auto;
}

/* Tablet Styles */
@media screen and (min-width: 687px) {
  .new-home-page .customer-review-card-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
* Category Card
*/
.new-home-page .new-category-card-container {
  display: grid;
  gap: 1rem;
  padding: 2rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card */
.new-home-page .new-category-card-container .new-category-card {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Image */
.new-home-page
  .new-category-card-container
  .new-category-card
  .new-category-card-image-container {
  aspect-ratio: 16 / 9;
  max-height: 12rem;
}

.new-home-page
  .new-category-card-container
  .new-category-card
  .new-category-card-image {
  object-fit: cover;
  height: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  transition: transform ease-in-out 0.2s;
  z-index: 0;
}

.new-home-page
  .new-category-card-container
  .new-category-card
  .new-category-card-image:hover {
  transform: scale(1.05);
}

/* Label */
.new-home-page
  .new-category-card-container
  .new-category-card
  .new-category-card-label {
  background: #ffffff;
  max-width: 100%;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

/*
* Featured Category Card
*/
.new-home-page .featured-category-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem 2rem 1rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.featured-category-grid .featured-category-card {
  background: #ffffff;
  overflow: hidden;
  border-radius: 0.5rem;
  position: relative;
  box-shadow: 0px 110px 44px rgba(0, 0, 0, 0.01),
    0px 62px 37px rgba(0, 0, 0, 0.05), 0px 28px 28px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.featured-category-card .featured-category-card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform ease-in-out 0.2s;
}

.featured-category-card .featured-category-card-image:hover {
  transform: scale(1.05);
}

.featured-category-card a {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  border-radius: 0.25rem;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0.75rem 1.25rem;
  box-shadow: 0px 9px 4px rgba(0, 0, 0, 0.01), 0px 5px 3px rgba(0, 0, 0, 0.05),
    0px 2px 2px rgba(0, 0, 0, 0.09), 0px 1px 1px rgba(0, 0, 0, 0.1),
    0px 0px 0px rgba(0, 0, 0, 0.1);
}

/* Tablet Styles */
@media screen and (min-width: 687px) {
  .new-home-page .new-category-card-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .new-home-page
    .new-category-card-container
    .new-category-card
    .new-category-card-label {
    padding: 1.25rem 1rem;
    font-size: 1.25rem;
  }
  .new-home-page .new-category-card-container {
    gap: 2rem;
  }
  .new-home-page .featured-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop Styles */
@media screen and (min-width: 1024px) {
  .new-home-page .new-category-card-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
