/* card-info style */
.center {
  display: flex;
  justify-content: center;
}
.headingSection {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  color: var(--ih-primary);
}
.headingSection img {
  width: 50px;
}
.headingSection div .HS_mainH {
  text-align: center;
  font-size: 2.3rem;
}
.headingSection div .HS_subH {
  font-weight: 400;
  text-align: center;
}

.sectionCtr {
  width: 95%;
  margin: 0px auto;
}
.shadelr {
  margin-top: 20px;
  padding: 30px 0px !important;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 24%,
    rgba(246, 246, 246, 1) 54%,
    rgba(5, 161, 185, 0.1727284663865546) 100%
  );
}

.shaderl {
  margin-top: 20px;
  padding: 30px 0px;
  background: rgb(59, 170, 141);
  background: linear-gradient(
    90deg,
    rgba(59, 170, 141, 0.11670605742296913) 24%,
    rgba(246, 246, 246, 1) 54%,
    rgba(255, 255, 255, 1) 100%
  );
}

.ctr-1 {
  margin-top: 20px;
}

.card-mainCtr {
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0px 30px;
}
.transition {
  transition: transform 0.8s ease-in-out, opacity 1s ease-in-out;
  opacity: 0;
}
.txtCtr h1 {
  font-size: 1.8rem;
}
.txtCtr h5 {
  font-size: 1rem;
  color: var(--ih-dullgray);
}
.txtCtr ul > li {
  font-size: 0.875rem;
  color: var(--ih-dullgray);
}
.transition p {
  color: var(--ih-dullgray);
  font-size: 1rem;
  font-family: "myfont-light", sans-serif;
}
.s-c-one .transition {
  transform: translateX(20%);
}
.s-c-two .transition {
  transform: translateX(-20%);
}
.s-c-one {
  flex: 1;
  min-width: 250px;
}

.txtCtr ul {
  padding: 10px 30px;
}
.txtCtr ul > li {
  line-height: 35px;
}
.s-c-two {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 250px;
}
.product-page-image {
  max-width: 300px;
  height: 300px;
  object-fit: contain;
}
.illustrationImg {
  width: 80%;
  height: auto;
}
.ctrPadding {
  padding: 10px;
}
.makerStyle {
  list-style-position: outside;
}
.makerStyle > li {
  padding-left: 10px;
  vertical-align: middle;
  font-size: 1rem;
}
.makerStyle > li::marker {
  content: "»";
  font-size: 1.6em;
  margin-top: 20px;
  --hue: 0;
  color: #ffa200;
}

@media screen and (max-width: 600px) {
  .sectionCtr {
    padding: 0px 10px;
  }
  .headingSection img {
    width: 50px;
  }
  .headingSection div .HS_mainH {
    text-align: center;
    font-size: 1.6rem;
  }
  .headingSection div .HS_subH {
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
  }
  .card-mainCtr {
    padding: 0px;
  }
  .transition h1 {
    font-size: 1.6rem;
  }
  .transition h5 {
    font-size: 1rem;
  }
  .txtCtr ul > li {
    font-size: 0.8rem;
  }
}

/* text shining */

.shiningText {
  background: #0f0660 -webkit-gradient(
      linear,
      left top,
      right top,
      from(#0f0660),
      to(#0f0660),
      color-stop(0.5, #eef8fa)
    ) 0 0 no-repeat;
  -webkit-background-size: 150px;
  color: rgba(255, 255, 255, 0.3);
  -webkit-background-clip: text;
  -webkit-animation-name: shine;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(255, 255, 255, 0.479);
}

@-webkit-keyframes shine {
  0%,
  10% {
    background-position: -1000px;
  }
  20% {
    background-position: top left;
  }
  90% {
    background-position: top right;
  }
  100% {
    background-position: 1000px;
  }
}