#mc-main-content
{
	margin: 0;
	padding:0;
	max-width: 100vw;
}
.body-container {
  padding: 0;
}
.row.outer-row.sidenav-layout {
  padding: 0;
}

.home-content {
    margin: 0;
    text-align: center;
    /* width: 100vw; */
    /* max-width:100%; */
}


/* =================  Hero image at top ========================= */

.home-hero {
  position: relative;
  /* width: 100vw; */
  height: 300px;
  max-height: 300px;
  background-image: url("../Images/home-page/hero/hero-geometric.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  color: black;
  text-align: center;
  flex-direction: column;
}

/* White overlay */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6); /* 60% white */
  z-index: 1;
}

/* Ensure text sits above overlay */
.home-hero > * {
  position: relative;
  z-index: 2;
	font-family:var(--font-semi)
}

.home-hero h2 {font-size:3rem;}

.home-hero p {font-size:130%;max-width:700px;margin:0 auto;}

form.search {
	border: none;
	max-width:700px;
	}
   

/* ========================= products ======================  */
.home-products {
    max-width: var(--screen-max-width);
    margin: 1rem auto;
    padding: 2rem 0;
    /* width: 100vw; */
}
.home-products h2 {
    text-align: left;
    color: var(--purple);
    margin-bottom:0;
    padding-bottom:0;
    text-indent: 20px;
}

.home-products h3 {
  text-align:left;
  margin-top:10px;
  text-indent: 20px;
}
.product-boxes {
  list-style: none;
  padding: 20px 3%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 10px;
}

.product-boxes li {
  border: 1px solid var(--purple);
  height: auto; /* adjust as needed */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  width: 100%;
  align-content: center;
  padding: 5px;
  /* font-size: 90%; */
  max-height: 120px;
  /* max-width: 120px; */
  min-height: 90px;
  /* min-width: 90px; */
  /* flex-wrap: wrap; */
  /* flex-direction: row; */
}

.product-boxes li:hover {background-color:var(--purple);}

.product-boxes li a {
  /* color: black; */
  text-decoration: none;
  /*font-weight: 600;*/
  font-family:var(--font-semi);
}
.product-boxes li:hover a {color: white;}
.product-boxes li a:hover {text-decoration: none;}

/* Hide items after the 9th by default */
.product-boxes li.hidden {
  display: none;
}

/* Optional: spacing for the button */
.show-more-container {
  margin-top: 15px;
  text-align: center;
}

.show-more-btn {
  padding: 8px 16px;
  background: var(--purple);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}

.show-more-btn:hover {
  background: var(--link-hover);
}
/*=========================== looking for more? ======================= */

/* Container */
.home-card-container {
  margin: 1rem auto;
  padding: 2rem 0;
  text-align: center;
  background-color: var(--pastel-purple);
  /* width: 100vw; */
}

.home-card-container h2 {
  margin: 0 auto;
  text-align:left;
  /* font-size: 2rem; */
  color: var(--purple);
  max-width: var(--screen-max-width);
  text-indent: 20px;
}

/* Row of cards */
.homecards {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap; /* keeps all 5 on one line */
  max-width: var(--screen-max-width);
  margin: 20px auto;
}

/* Individual card */
.homecard {
  width: 240px;
  /* height: 420px; */
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  align-content: stretch;
  justify-content: flex-start;
  min-width: 240px;
}

/* Image area */
.card-media {
  /* height: 200px; */
  width: 100%;
  /* overflow: hidden; */
}

.card-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  /* min-height: 100px; */
}

/* Content */
.card-content {
  padding: 1rem;
  flex-grow: 1; /* pushes footer down */
  width: 100%;
  margin: 0;
}

.card-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-desc {
  font-size: 0.9rem;
  line-height: 1.3rem;
}

/* Footer buttons */
.card-footer {
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: auto; /* ensures footer stays at bottom */
  margin: auto auto 20px;
  width: 90%;
}

.btn-learn {
  padding: 0.5rem 1rem;
  background: var(--purple, #6a2c91);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ==================  card carousel ==========================  */

.home-carousel {
  text-align: center;
  margin: 1rem auto;
  padding: 2rem 0;
  /* width: 100vw; */
}

.home-carousel h2 {
  margin-bottom: 1.5rem;
  max-width: var(--screen-max-width);
  margin: 1rem auto;
  text-align: left;
  text-indent: 20px;
}

/* Carousel layout */
.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--screen-max-width);
  margin: 0 auto;
  overflow: hidden;
}

/* Scrollable list */
.home-card-icons {
  list-style: none;
  padding: 0;
  margin: 0 10px;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  gap: 10px;
  width: 1260px;
}

/* Each box */
.home-card-icons li {
  width: 200px;
  height: 120px;
  background: white;
  border: 1px solid var(--purple);
  color: var(--purple);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.home-card-icons li:last-child {
  margin-right: 0;
}

/* Link styling */
.home-card-icons li a {
  color: var(--purple);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Icon placeholder */
.home-card-icons li img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* Hover */
.home-card-icons li:hover {
  background: var(--purple);
}

.home-card-icons li:hover a {
  color: white;
}

.home-card-icons li a:hover {
  text-decoration: none;
}

/* Buttons */

	.carousel-btn {
		display: block;
		background: var(--purple);
		color: white;
		border: none;
		padding: 0.5rem 0.75rem;
		cursor: pointer;
		font-size: 1.5rem;
		border-radius: 4px;
	}
	
	button.carousel-btn:focus {
    outline: none;
}

/* ------------------  customer kb ----------------  */

.customer-kb {
  position: relative;
  /* width: 100vw; */
  height: 150px;
  max-height: 300px;
  background-image: url("../Images/home-page/hero/hero-people.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  color: black;
  text-align: center;
  flex-direction: column;
}

div.customer-kb h2 {
	background:  var(--pastel-purple);
	font-size: 150%;
	text-align: left;
	margin: 20px auto 20px calc( (100vw - var(--screen-max-width)) / 2);
	max-width: var(--screen-max-width);
	padding: 10px 20px 10px 10px;
}
div.customer-kb h2 a:hover {
	text-decoration: none;
}

@media only screen and (max-width: 1450px) {
		div.customer-kb h2 {margin:0 auto 0 0 ;}

}
@media only screen and (max-width: 1279px) {

	.product-boxes {
	  grid-template-columns: repeat(5, 2fr);
	}


}


@media only screen and (max-width: 679px) {

	.product-boxes {
	  grid-template-columns: repeat(3, 3fr);
	}
}